Ant Design Vue 表格行内编辑！！！

效果图

无图言叼，直接上图：

应用场景

对于修改表格数据，比较主流的是通过模态框内嵌表单来修改。这样上手比较简单，验证功能很强大。如果通过表格行内编辑的话，上手稍微复杂一点，直接在列里面修改，会非常直观顺畅，但是有一定的缺陷，无法内嵌表单，验证起来比较不友好。

.Vue

<template><div><div class="page-location-wrapper"><bread-nav :nav-list="['数据模版', '数据模版DEMO']"/><h1>数据模版DEMO</h1></div><div class="public-container"><div class="public-operation-bar"><div class="button-wrapper"><a-button icon="plus-circle" type="primary"@click="addRow">新增</a-button><a-button type="primary">批量发布</a-button></div></div><a-divider/><div class="table-wrapper"><!--每个列的宽度必须比列名总长度大才能使表格所有列对齐，留一个列不设置宽度--><a-table:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelectAll: onSelectAllChange}":columns="columns":dataSource="tableData"borderedsize="middle":pagination="pagination":loading="tableLoading":scroll="{x: 2050}"><templatev-for="col in customRenderList"v-slot:[col]="text, record, index"><div :key="col"><a-input:read-only="readonlyArr.includes(col)"placeholder="请输入"v-if="record.editable && inputScopedSlots.includes(col)":value="text"@change="e => handleChange(e.target.value, record.key, col)"/><a-date-pickerplaceholder="请选择时间"v-else-if="record.editable && dateScopedSlots.includes(col)":value="momentDateStr(text)"@change="onChangeDate($event, record.key, col)"/><a-selectplaceholder="请选择"style="display: block;"v-else-if="record.editable && selectScopedSlots.includes(col)":value="text"@change="onChangeSelect($event, record.key, col)"><a-select-option value="lucy">Lucy</a-select-option><a-select-option value="jack">Jack</a-select-option></a-select><span v-else>{{text}}</span></div></template><template #action="text, record, index"><div class="editable-row-operations"><div v-if="record.editable"><a @click="save(record.key)">保存</a><a-divider type="vertical"/><a @click="cancel(record.key)">取消</a></div><div v-else><a @click="edit(record.key)">编辑</a></div></div></template></a-table></div></div></div>
</template><script>import Mixin from './mixin'import Moment from 'moment'export default {name: "DataTemplateDemo",mixins: [Mixin],methods: {// 将时间字符串 转换 为 MomentmomentDateStr(dateStr) {return Moment(dateStr)}}}
</script>

Mixin

import {clearReference} from '@/utils/utils'const data = []for (let i = 0; i < 10; i++) {data.push({key: i,a: '2019-12-17',b: 'lucy',c: '22',e: '22',d: '22',f: '22',g: '22',h: '22',i: '22',j: '22',editable: false})
}const Mixin = {data() {return {// 表格列 - 为了方便使 dataIndex === scopedSlots.customRendercolumns: [{title: '左边固定', width: 200, align: 'center', dataIndex: 'a', fixed: 'left', scopedSlots: {customRender: 'a'}},{title: '测试列3', width: 200, dataIndex: 'b', scopedSlots: {customRender: 'b'}},{title: '测试列4', width: 200, dataIndex: 'c', scopedSlots: {customRender: 'c'}},{title: '测试列5', width: 200, children: [{title: '分组1', width: 200, dataIndex: 'e', scopedSlots: {customRender: 'e'}},{title: '分组2', width: 200, dataIndex: 'j', scopedSlots: {customRender: 'j'}},]},{title: '测试列6', width: 200, dataIndex: 'f', scopedSlots: {customRender: 'f'}},{title: '测试列7', width: 200, dataIndex: 'g', scopedSlots: {customRender: 'g'}},{title: '测试列8', width: 200, dataIndex: 'h', scopedSlots: {customRender: 'h'}},{title: '测试列8', dataIndex: 'i', scopedSlots: {customRender: 'i'}},{title: '右边固定2', width: 200, align: 'center', scopedSlots: {customRender: 'action'}, fixed: 'right'},],// 表格数据tableData: [],// 表格缓存的数据 - 用来点击取消时回显数据cacheData: [],// 每一列的插槽名 - 表格行内编辑用customRenderList: ['a', 'b', 'c', 'e', 'f', 'g', 'h', 'i', 'j'],// 用来匹配插槽中显示input框inputScopedSlots: ['c', 'e', 'f', 'g', 'h', 'i', 'j'],// 用来匹配插槽中显示date框dateScopedSlots: ['a'],// 用来匹配插槽中显示select框selectScopedSlots: ['b'],// 对于某些自动赋值的input框设为 只读readonlyArr: ['c'],// 表格分页pagination: {current: 1,size: 'large',pageSize: 10, // 默认每页显示数量total: 0, // 总条数showQuickJumper: true,showTotal: (total, range) => `总共 ${total} 条记录，当前第 ${range[0]}条至第${range[1]}条`,onChange: (page) => this.pageChange(page)},// 表格loadingtableLoading: false,// 表格选中keyselectedRowKeys: []}},created() {// 此处模拟ajax，赋值（需清除引用）this.tableData = clearReference(data)this.cacheData = clearReference(data)},methods: {// 分页事件pageChange(page) {this.pagination.current = page},// 表格选中事件onSelectChange(selectedRowKeys) {console.log(selectedRowKeys);this.selectedRowKeys = selectedRowKeys;},// 表格点击全选事件onSelectAllChange(selected, selectedRows) {// 判断 全选并且第一行数据为新增 则不选中新增那一行if (selected && selectedRows[0].key === 'newRow') {this.selectedRowKeys.splice(0, 1)}},// 添加一行addRow() {if (this.tableData.some(item => item.newRow === true)) return this.$message.info('请先编辑完毕后在再添加！');// 新增时取消表格选中的keythis.selectedRowKeys = []this.tableData.unshift({key: 'newRow',  // newRow 表示该行是新增的，提交成功后 key替换为数据库IDnewRow: true,   //用来限制只能新增一行a: this.$dateformat(new Date(), 'isoDate'),b: undefined,c: '',e: '',d: '',f: '',g: '',h: '',i: '',j: '',editable: true})this.cacheData.unshift({key: 'newRow',newRow: true,a: this.$dateformat(new Date(), 'isoDate'),b: undefined,c: '',e: '',d: '',f: '',g: '',h: '',i: '',j: '',editable: false})},// 编辑一行edit(rowKey) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];// 根据rowKey判断该行数据是否存在if (target) {target.editable = true;   // 修改target可以直接影响到newDatathis.tableData = newData;}},// 点击保存save(rowKey) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {delete target.editable;this.tableData = newData;this.cacheData = newData.map(item => ({...item}));}},// 点击取消cancel(rowKey) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {// 将缓存数据中匹配到的数据对象覆盖合并当前被修改的行Object.assign(target, this.cacheData.filter(item => rowKey === item.key)[0]);delete target.editable;this.tableData = newData;}},// input 输入changehandleChange(value, rowKey, colName) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {target[colName] = value;this.tableData = newData;}},// 日期框 changeonChangeDate($event, rowKey, colName) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {target[colName] = this.$dateformat($event, 'isoDate');this.tableData = newData;}},// select 框 changeonChangeSelect($event, rowKey, colName) {const newData = [...this.tableData];const target = newData.filter(item => rowKey === item.key)[0];if (target) {target[colName] = $event;// 根据select框的值自动带出某个input的值 - 因为第三列列名为c$event === 'lucy' ? target.c = '根据lucy带出的值' : target.c = '根据jack带出的值'this.tableData = newData;}}}
}export default Mixin

实现原理

基于antV官方的一个 demo 加上自己一些新增的实现，具体实现在代码里面有非常详细的注释。无奈没有更多的时间去优化这篇长大粗的博文，目前只能简单粗暴的将demo代码粘上来。

补充

对于文中的 clearReference 方法其实就是 JSON.parse(JSON.stringify(obj))
补充于 2021年3月22日：this.$dateformat 是 https://www.npmjs.com/package/dateformat 插件

Ant Design Vue 表格行内编辑！！！相关推荐

Ant Design Vue 表格内编辑（附完整源码及效果图）
效果图: 实现关键代码就是表单的 columns 属性对象下标的 scopedSlots: scopedSlots: {customRender: '' } 实现完整代码: <template& ...
bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景之前的项目也是采 ...
python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
Datatables实现表格行内编辑功能
表格行内编辑功能通过操作DOM来实现,最终实现效果如下代代码 html <table class="table table-striped table-bordered table-h ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
ant design vue 表格中时间戳转换成时间格式显示
ant design vue 表格中时间戳转换成时间格式显示原始数据表格如上图,因为接口传递过来的时间是10位int类型的时间戳格式,所以前端需要我们把时间格式化. step1 安装moment n ...
datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
表格行内编辑增删改查
前言最近在做一个OA系统,需要将大量excel中的数据录入,并且希望以后新建数据时,也能像excel那样方便.并且这个后台系统有非常多这样的表单.因此需要做一个内敛的表单控件. 上网找到一款编辑起来 ...
ant design vue 表格table 默认选择几项getCheckboxProps
首先我们看一下场景在table组件里默认选择第一项,如下图所示: 查看table文档后发现只有getCheckboxProps或许能修改checkbox 文档说是一个函数,然后就写一个方法,有一个默认 ...
editable组件_表格行内编辑事件
1.简介 x-editable组件是一个适用于bootstrap(目前只更新到bootstrap3),jquery,jquery UI三种风格样式的弹出框编辑插件.本文根据项目需求主要介绍它在boot ...