最近遇到的需求，一个表格，需要行内编辑(其实最后还是改为了弹出框编辑)，前台使用的是 vue,ui 是 ant,ant....以前没用过，刚用了半个月，反正觉着不太好用，API 写的也不是太清楚。
然后就是行内编辑这个事儿，我觉得是数据字段比较少可以使用，如果数据字段比较多的话，会出现横向滚动条，在编辑的时候需要 来回拖动滚动条，客户使用上肯定会比较麻烦。
代码
<template ><a-layout id="components-layout-demo-top"><a-layout-content style="overflow:auto;" ><a-spin :spinning="addOrUpdateLoading"><a-table ref="table1" :bordered="true" :columns="columns" :data-source="listdata" class="whitetable" :pagination="false"><template slot="xuhaoslot" slot-scope="text, record, index">{{index+1}}</template><template slot="nameslot" slot-scope="text, record, index"><div v-if="record.editable" ><a-inputstyle="margin: -5px 0":value="text"@change="(e) => handleChangeIndex(e.target.value, index, 'name','listdata')"/></div><div v-else>{{text}}</div></template><template slot="functionslot" slot-scope="text, record, index"><div v-if="record.editable" ><a-inputstyle="margin: -5px 0":value="text"@change="(e) => handleChangeIndex(e.target.value, index, 'function','listdata')"/></div><div v-else>{{text}}</div></template><template slot="operation" slot-scope="text, record, index"><div class="editable-row-operations"><span v-if="record.editable"><a @click="saveRowIndex(record)">保存</a> <a-popconfirm title="确定取消吗?" @confirm="() => cancelIndex(record)"><a>取消</a></a-popconfirm></span><span v-else><a @click="() => editRowIndex(record,index)">编辑</a> <a-popconfirm title="确定删除吗?" @confirm="() => delRowIndex(index)"><a>删除</a></a-popconfirm></span></div></template></a-table></a-spin></a-layout-content></a-layout></template><script>const columns =[{title:'序号',width:80,dataIndex: 'id',key: 'id',align:'center',scopedSlots:{customRender: 'xuhaoslot'}},{title:'名称',width:150,dataIndex: 'name',key: 'name',scopedSlots:{customRender: 'nameslot'}},{title:'功能',width:150,dataIndex: 'function',key: 'function',scopedSlots:{customRender:'functionslot'}},{title:'修改',width:150,scopedSlots: {customRender: 'operation'}}]export default {data() {return {listdata:[],//列表行数据源columns, // 列表行 columnseditingKey: '', //修改或新增标志addOrUpdateLoading:false,//加载中}},methods: {//修改行editRowIndex(record,key){//判断是否处于编辑状态if(this.editingKey !== null && this.editingKey !== ''){if(this.editingKey==='newkey'){this.$message.error('请先完成本次操作后在做添加')}else{this.$message.error('请先完成修改后在做添加')}return false}this.editingKey = key //修改状态 防止 在修改时，点击新增//该行设置为 可编辑状态if (record) {record.editable = true}},//新增行addRow(){//判断是否处于编辑状态if(this.editingKey !== null && this.editingKey !== ''){if(this.editingKey==='newkey'){this.$message.error('请先完成本次操作后在做添加')}else{this.$message.error('请先完成修改后在做添加')}return false}this.editingKey = 'newkey' //新增状态 防止 在新增时，点击修改this.listdata.push({id:'',name:'',functionTechnology:''})},//取消cancelIndex(record){//如果是新增，取消后需要删除 listdata 数组的 最后一个if(this.editingKey === 'newkey'){this.listdata.splice(this.listdata.length-1,1)}//重置 editable 数据record.editable=falsethis.editingKey=null},saveRowIndex(record){//保存或修改this.addOrUpdateLoading = true//调用后台方法 $axios ..... // 调用成功之后根据自己的需求 看 要不要重新查询列表},//表格确定回调//value 修改后的数据//key 数据源数组的 第几个// column 修改的列名//data 修改的数据源 listdatahandleChangeIndex(value, key, column,data) {const dataSource = this.listdataconst target = dataSource[key]if (target) {target[column] = valuethis.listdata = dataSource}},},created() {}}</script>
代码逻辑比较简单，每一个字段都是使用的scopedslots这种方式，template 中主要是两个需要来回显示的代码，一个是纯文本，一个是input，通过v-if='editable' 来判断显示哪一个，当点击编辑时 input 框显示，然后可以输入信息，每个输入框都有change 事件，每次修改，都会把信息保存在 listdata中， 点击保存，调用后台方法，保存数据，至于要不要刷新表格，看你的具体业务
