D2 Crud,一款简单易用的表格组件

栏目: Node.js · 发布时间: 6年前

内容简介:GitHub:文档:

D2-Crud 是一套基于Vue.js 2.2.0+ 和Element UI 2.0.0+ 的表格组件。 D2-CrudElement 的功能进行了封装,并增加了表格的增删改查、数据校验、表格内编辑等常用的功能。大部分功能可由配置 json 实现,在实现并扩展了 Elememt 表格组件功能的同时,降低了开发难度,减少了代码量,大大简化了开发流程。

GitHub: github.com/d2-projects…

文档: d2-projects.github.io/d2-admin-do…

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

示例部署在 Github Pages 如果您的网络不太好(示例项目中包含大量示例,体积较大),请完整克隆 项目 在本地启动。

作者

发表此文的账号并不是 D2-Crud 原作者账号。

作者掘金地址:@被遗忘的传说。

作者 github sunhaoxiang

欢迎大家关注支持他,也支持我们继续开源 ~

功能简介

  • 继承了 Element 中表格所有功能
  • 表格新增数据
  • 表格修改数据
  • 表格删除数据
  • 使用 Element 中的组件渲染表格内容和表单编辑内容
  • 表单编辑校验
  • 表格内直接编辑模式

如何使用

使用npm安装:

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>
复制代码

下图是上述代码片段的渲染结果:

示例

新增数据

D2 Crud,一款简单易用的表格组件
演示地址: d2-projects.github.io/d2-admin/#/…

修改数据

D2 Crud,一款简单易用的表格组件
演示地址: d2-projects.github.io/d2-admin/#/…

删除数据

D2 Crud,一款简单易用的表格组件
演示地址: d2-projects.github.io/d2-admin/#/…

表单校验

D2 Crud,一款简单易用的表格组件
演示地址: d2-projects.github.io/d2-admin/#/…

表格内编辑

D2 Crud,一款简单易用的表格组件
演示地址: d2-projects.github.io/d2-admin/#/…

一个带有编辑删除功能的例子与直接使用 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>
复制代码

D2 Projects 简介

团队主页: github.com/d2-projects

在最后,如果你看完了,并且觉得还不错,希望可以到团队主上给我们的项目点一个 star 作为你对我们的认可与支持,谢谢。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

信息时代三部曲:经济、社会与文化

信息时代三部曲:经济、社会与文化

[美] 曼纽尔·卡斯特(Manuel Castells) / 夏铸九、王志弘 / 社会科学文献出版社 / 2003 / 33.00

《信息时代三部曲:经济、社会与文化》包括《网络社会的崛起》《认同的力量》《千年终结》,由英国Blackwell Publishers Ltd. 授权出版,据原书1997版和2000版译出。2001年和2006年版《网络社会的崛起》也使用了同一ISBN。一起来看看 《信息时代三部曲:经济、社会与文化》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具