亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

D2 Crud，一款簡單易用的表格組件

fevin / 1876人閱讀

摘要：是一套基于和的表格組件。將的功能進(jìn)行了封裝，并增加了表格的增刪改查數(shù)據(jù)校驗(yàn)表格內(nèi)編輯等常用的功能。大部分功能可由配置實(shí)現(xiàn)，在實(shí)現(xiàn)并擴(kuò)展了表格組件功能的同時(shí)，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。

D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進(jìn)行了封裝，并增加了表格的增刪改查、數(shù)據(jù)校驗(yàn)、表格內(nèi)編輯等常用的功能。大部分功能可由配置 json 實(shí)現(xiàn)，在實(shí)現(xiàn)并擴(kuò)展了 Elememt 表格組件功能的同時(shí)，降低了開發(fā)難度，減少了代碼量，大大簡化了開發(fā)流程。

GitHub：https://github.com/d2-project...

文檔：https://d2-projects.github.io...

示例：https://d2-projects.github.io...

示例部署在 Github Pages 如果您的網(wǎng)絡(luò)不太好（示例項(xiàng)目中包含大量示例，體積較大），請完整克隆 項(xiàng)目 在本地啟動。
功能簡介

繼承了 Element 中表格所有功能

表格新增數(shù)據(jù)

表格修改數(shù)據(jù)

表格刪除數(shù)據(jù)

使用 Element 中的組件渲染表格內(nèi)容和表單編輯內(nèi)容

表單編輯校驗(yàn)

表格內(nèi)直接編輯模式

如何使用

使用npm安裝：

npm i element-ui @d2-projects/d2-crud -S

使用yarn安裝：

yarn add element-ui @d2-projects/d2-crud

在 main.js 中寫入以下內(nèi)容：

import Vue from "vue"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
import D2Crud from "@d2-projects/d2-crud"

Vue.use(ElementUI)
Vue.use(D2Crud)

new Vue({
  el: "#app",
  render: h => h(App)
})

一個(gè)簡單的表格示例：

下圖是上述代碼片段的渲染結(jié)果：

示例 新增數(shù)據(jù)


演示地址：https://d2-projects.github.io...

修改數(shù)據(jù)


演示地址：https://d2-projects.github.io...

刪除數(shù)據(jù)


演示地址：https://d2-projects.github.io...

表單校驗(yàn)


演示地址：https://d2-projects.github.io...

表格內(nèi)編輯


演示地址：https://d2-projects.github.io...

代碼對比

一個(gè)帶有編輯刪除功能的例子與直接使用 Element UI 的代碼對比

使用D2 Crud：

直接使用Element UI的表格組件：
D2 Projects

團(tuán)隊(duì)主頁：https://github.com/d2-projects

如果你看完了，并且覺得還不錯，希望可以到團(tuán)隊(duì)主上給我們的項(xiàng)目點(diǎn)一個(gè) star 作為你對我們的認(rèn)可與支持，謝謝。

加入小組

開源項(xiàng)目組官方公眾號，關(guān)注及時(shí)獲得最新更新資訊、文檔地址、相關(guān)的技術(shù)文章：

2000 人 QQ 交流群，及時(shí)答疑解惑：

如果需要加微信群，請關(guān)注公眾號在底部菜單獲取二維碼。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/97356.html

相關(guān)文章

  • Iceworks 2.7.0 發(fā)布，海量圖表供你選擇

    摘要：發(fā)布，海量圖表供你選擇，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求輕松操作頁面管理，海量物料自由搭配，頁面組合可視化操作更得心應(yīng)手開發(fā)調(diào)試一體化，集成運(yùn)行環(huán)境零配置運(yùn)行，開箱即用。 Iceworks 2.7.0 發(fā)布，海量圖表供你選擇 Iceworks，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求；輕松操作頁...

    gitmilk 評論0 收藏0

  • Iceworks 2.7.0 發(fā)布，海量圖表供你選擇

    摘要：發(fā)布，海量圖表供你選擇，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求輕松操作頁面管理，海量物料自由搭配，頁面組合可視化操作更得心應(yīng)手開發(fā)調(diào)試一體化，集成運(yùn)行環(huán)境零配置運(yùn)行，開箱即用。 Iceworks 2.7.0 發(fā)布，海量圖表供你選擇 Iceworks，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求；輕松操作頁...

    ymyang 評論0 收藏0

  • vue的生命周期解析并通過表單理解MVVM（不僅理論，圖文并茂）

    摘要：在前端頁面中，把用純對象表示，負(fù)責(zé)顯示，兩者做到了最大限度的分離。的顯示與否和的布爾值有關(guān)，還是只關(guān)注數(shù)據(jù)的變化。兩個(gè)組件的布爾值通過兩個(gè)臨近的按鈕控制，初始值和的結(jié)果都是。組件的聲明在組件上，則完全沒有進(jìn)入生命周期。 開始前說一說 吐槽 首先， 文章有謬誤的地方， 請?jiān)u論， 我會進(jìn)行驗(yàn)證修改。謝謝。 vue真是個(gè)好東西，但vue的中文文檔還有很大的改進(jìn)空間，有點(diǎn)大雜燴的意思，對于怎么...

    silvertheo 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<