一.新建Vue2项目

vue create demo

二.安装引入Antd

1.安装Antd

yarn add ant-design-vue@1.7.8

2.引入Antd

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入svg
import './icons'Vue.config.productionTip = falseimport Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';Vue.use(Antd);/* eslint-disable no-new */
//runtimenew Vue({router,store,render: h => h(App)
}).$mount("#app")

三.修改组件代码

<template><a-form-model ref="tableform" :model="form"><a-table :columns="columns" :data-source="form.tableData" :row-key="(record) => record.id" :pagination="false" :loading="loading"><template v-for="col in ['name','age','address']" :slot="col" slot-scope="text, record, index"><div :key="col"><a-form-model-item v-if="record.editable" :prop="'tableData.'+index+'.'+col" :rules="rules[col]"><a-input :ref="'input'+col" v-model="record[col]" @blur="e => handleBlur(e.target.value, record.key, col)"/></a-form-model-item><template v-else><span style="display:inline-block;width: 100%;" @click="e => edit(e.target.value, record.key, col)">{{text}}</span></template></div></template></a-table></a-form-model>
</template><script>export default {data() {return {columns:[{title: 'id',align: 'center',dataIndex: 'id',key: 'id',slots: { title: 'id' },scopedSlots: { customRender: 'id' },},{title: 'name',align: 'center',dataIndex: 'name',key: 'name',slots: { title: 'name' },scopedSlots: { customRender: 'name' },},{title: 'age',align: 'center',dataIndex: 'age',key: 'age',slots: { title: 'age' },scopedSlots: { customRender: 'age' },},{title: 'address',align: 'center',dataIndex: 'address',key: 'address',slots: { title: 'address' },scopedSlots: { customRender: 'address' },}],loading: false,editingKey: '',form:{tableData:[{id:1,key:1,name:'张三',age:12,address:'河北保定'},{id:2,key:2,name:'李四',age:24,address:'河南驻马店'}]},rules: {name: { required: true, message: '姓名不能为空!' },age: { required: true, message: '年龄不能为空!' },address: { required: true, message: '地址不能为空!' },}}},methods: {edit(value, key, column) {console.log(value, key, column)const newData = [...this.form.tableData];const target = newData.find(item => key === item.key);this.editingKey = key;if (target) {target.editable = true;this.form.tableData = newData;this.$nextTick(() => {let id = 'input' + columnconsole.log(this.$refs[id])this.$refs[id][0].focus()})}},handleBlur (value, key, column) {this.$refs.tableform.validate(async valid => {if (valid) {const newData = [...this.form.tableData];const target = newData.find(item => key === item.key);this.editingKey = key;if (target) {delete target.editablethis.form.tableData = newData;}//调取编辑接口this.$message.success('提交成功')}})},}}
</script>
<style scoped>/deep/.ant-form-item {margin: 0 !important;}/deep/.ant-table-row {height: 75px;}
</style>

如果文章有帮助的话,欢迎一键三连,感谢支持!

Antd+Vue2实现动态编辑表格相关推荐

javascript将table的td变为可编辑的input，实现表格动态编辑（带示例版）
写在前面该内容很久以前就写了,放在下载频道,csdn自动将分数调至很高,所以今天把里面的内容全部以博客形式写出来 CSDN下载地址动态表格js实现文件名:edit-tb.js /**** 功能: ...
Antd Table 可编辑表格
antd Table 官方文档提及了可编辑单元格.可编辑行,这里解决可编辑表格主要思路是将 antd Table 可编辑行与 antd Form.List 相结合,将Table视为 Form. ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
动态添加跨行表格_手把手教你制作Excel动态统计表格，主管看了都会竖起大拇指！-Office教程...
教程领到手,学习不用愁!领 ↑↑↑ 还有朋友不知道知识兔吗?知识兔就是下载考试资料|软件|教程|素材的网站,建议去搜索引擎搜索知识兔!知识兔是课程网站吗?知识兔有什么课程?知识兔可以兔费领取下载课程, ...
iview可编辑表格组件封装
因为公司需要尝试新的UI框架,因此自己也是学习了iview这个新的框架,之前一直都是用的element-ui,正好公司项目用到可编辑表格这样的组件,但是网上也是搜不到相关的资料,所以自己在参考了ivi ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
可编辑表格TableCell
方法一----------------------------------------------------------------------------- <html> <he ...
html动态生成可输入的表格,动态生成表格.html
动态生成表格 table, thead, tr, th, td{ border: 0; } th { width: auto; } 姓名科目成绩操作 // 使用对象储存的数据,列表 data = [ ...
antd react table 嵌套子表格例子
antd react table 嵌套子表格例子 import { Button, TableColumnsType } from 'antd'; import { Badge, Dropdown, ...

Antd+Vue2实现动态编辑表格

一.新建Vue2项目

二.安装引入Antd

三.修改组件代码

Antd+Vue2实现动态编辑表格相关推荐

最新文章

热门文章