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

時間 2019-12-01

原文原文鏈接

D2-Crud 是一套基於Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格組件。D2-Crud 將 Element 的功能進行了封裝，並增長了表格的增刪改查、數據校驗、表格內編輯等經常使用的功能。大部分功能可由配置 json 實現，在實現並擴展了 Elememt 表格組件功能的同時，下降了開發難度，減小了代碼量，大大簡化了開發流程。javascript

GitHub：github.com/d2-projects…css

文檔：d2-projects.github.io/d2-admin-do…html

示例：d2-projects.github.io/d2-admin/#/…vue

示例部署在 Github Pages 若是您的網絡不太好（示例項目中包含大量示例，體積較大），請完整克隆項目在本地啓動。java

做者

發表此文的帳號並非 D2-Crud 原做者帳號。git

做者掘金地址：@被遺忘的傳說。github

做者 github sunhaoxiangnpm

歡迎你們關注支持他，也支持咱們繼續開源 ~element-ui

功能簡介

繼承了 Element 中表格全部功能
表格新增數據
表格修改數據
表格刪除數據
使用 Element 中的組件渲染表格內容和表單編輯內容
表單編輯校驗
表格內直接編輯模式

如何使用

使用npm安裝：json

npm i element-ui @d2-projects/d2-crud -S
複製代碼

使用yarn安裝：

yarn add element-ui @d2-projects/d2-crud
複製代碼

在 main.js 中寫入如下內容：

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)
})
複製代碼

一個簡單的表格示例：

<template>
  <div>
    <d2-crud ref="d2Crud" :columns="columns" :data="data"/>
  </div>
</template>

<script> export default { data () { return { columns: [ { title: '日期', key: 'date' }, { title: '姓名', key: 'name' }, { title: '地址', key: 'address' } ], data: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' } ] } } } </script>
複製代碼

下圖是上述代碼片斷的渲染結果：

示例

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

使用D2 Crud：

<template>
  <div>
    <d2-crud ref="d2Crud" :columns="columns" :data="data" index-row selection-row :rowHandle="rowHandle" :form-template="formTemplate" @row-edit="handleRowEdit" @row-remove="handleRowRemove"/>
  </div>
</template>
<script> export default { data() { return { columns: [ { title: '日期', key: 'date' }, { title: '姓名', key: 'name' }, { title: '地址', key: 'address' } ], data: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' } ], rowHandle: { edit: { size: 'mini' }, remove: { size: 'mini' } }, formTemplate: { date: { title: '日期', value: '' }, name: { title: '姓名', value: '' }, address: { title: '地址', value: '' } } } }, methods: { handleRowEdit ({index, row}, done) { this.$message({ message: '編輯成功', type: 'success' }) done() }, handleRowRemove ({index, row}, done) { this.$message({ message: '刪除成功', type: 'success' }) done() } } } </script>
複製代碼

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

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="date" label="日期">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操做">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, tableData)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="編輯" :visible.sync="showDialog">
      <el-form>
        <el-form-item label="日期">
          <el-input v-model="form.date"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleEditSave">確 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script> export default { data() { return { tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀區金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀區金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀區金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀區金沙江路 1516 弄' } ], form: { date: '', name: '', address: '' }, showDialog: false } }, methods: { handleEdit (index, row) { this.showDialog = true this.editIndex = index this.form = row this.$message({ message: '編輯成功', type: 'success' }) }, handleEditSave () { this.showDialog = false }, handleDelete (index, rows) { this.$confirm('是否刪除?', '提示', { confirmButtonText: '肯定', cancelButtonText: '取消', type: 'warning' }).then(() => { rows.splice(index, 1) this.$message({ message: '刪除成功', type: 'success' }) }) } } } </script>
複製代碼