el |
您所在的位置：网站首页 › select设置为可编辑 › el |
el
|
远离其实很简单：就是在获取table数据后，对数组进行遍历，每一个都添加上一个show属性，并赋值为false， 然后在每个el-table-column中进行判断： 原理就是这样，其他的控件比如：选择框、时间框、数字选择框等等吧，都可以适用。 // 如果show=true的话，就显示el-input // 如果show=false的话，就显示值 {{scope.row.name}}效果如下：
下面是完整地代码： 编辑 取消 保存 {{scope.row.dydjbm}} {{scope.row.name}} export default { data(){ return{ dydjbm: [{ value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }], tabledatas: [], selectlist: [] } }, methods:{ /** 单个去勾选时触发自定义的selectItem函数 @selection-change事件会默认传行数据进去， 用selectItem(rows)的rows接收就好，rows所选行数据的数组 */ selectItem(rows) { if (rows.length > 1) { var newRows = rows.filter((it, index) => { if (index == rows.length - 1) { this.$refs.table.toggleRowSelection(it, true); return true; } else { this.$refs.table.toggleRowSelection(it, false); return false; } }); this.selectlist = newRows; } else { this.selectlist = rows; } }, /** 点击那一行数据触发的事件默认传点击那行的数据，自定义onSelectOp(row)函数， 用row来接收点击的那行数据， 先把所有的选项清空this.$refs.multipleTable.clearSelection(); 再把点击的那行勾选this.$refs.multipleTable.toggleRowSelection(row, true); 把自定义数组清空this.selectlist = []; 把新勾选的数据push进数组this.selectlist.push(row); */ onSelectOp(row) { this.$refs.table.clearSelection(); this.$refs.table.toggleRowSelection(row, true); this.selectlist = []; this.selectlist.push(row); }, // 编辑 edit(row){ this.selectlist[0].show=true }, //保存 save(){ this.selectlist[0].show = false }, //取消 cancle(){ this.selectlist[0].show = false } }, created(){ // 发请求去后台拿数据,如果有api，就正常请求， //我这里是demo，就简单给list赋值了，原理一样。 // getlistApi().then(res => { // let list = res.data.list let list = [ { dydjbm: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { dydjbm: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { dydjbm: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', }, { dydjbm: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }] list.forEach(element => { element["show"] = false }); this.tabledatas = list } }
|
【本文地址】
今日新闻 |
推荐新闻 |