兰州微网站,微擎可以做企业网站吗,那个网站做排列五头比较准,品牌网站建设 2蝌蚪小在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态#xff0c;失去焦点时还原表格显示。 实现思路#xff1a;
在数据中增加isFocus:false.控制是否显示在table中用cell-dblclick双击方法
先看效果#xff1a;
上源码#xff1a;在表格模板中用scope.row…在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态失去焦点时还原表格显示。 实现思路
在数据中增加isFocus:false.控制是否显示在table中用cell-dblclick双击方法
先看效果
上源码在表格模板中用scope.row.isFocus focusLabelName姓名1控制多个单元格显示
el-table :datatableData border stripe stylewidth: 100% cell-dblclicktabClickel-table-column propdate labelProduct Name width180/el-table-columnel-table-column propaddress label地址/el-table-columnel-table-column propprice label姓名1 width180template slot-scopescopeel-input v-ifscope.row.isFocus focusLabelName姓名1 v-focus sizesmall v-modelscope.row.price changechangeTrafOrigTaxAmount(scope.row) blurblurInput(scope.row)/el-inputspan v-else{{scope.row.price}}/span/template/el-table-columnel-table-column propprice label姓名2 width180template slot-scopescopeel-input v-ifscope.row.isFocus focusLabelName姓名2 v-focus sizesmall v-modelscope.row.price2 changechangeTrafOrigTaxAmount(scope.row) blurblurInput(scope.row)/el-inputspan v-else{{scope.row.price2}}/span/template/el-table-column
/el-table方法
data: function () {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,price: 1000,price2: 1000,price3: 1000,isTransfer: true,rate: 0.3,amount: 1000,isFocus: false,}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,price: 1000,isTransfer: false,rate: 0.3,amount: 1000,isFocus: false,}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,price: 1000,price2: 1000,price3: 1000,isTransfer: true,rate: 0.3,amount: 1000,isFocus: false,}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,price: 1000,price2: 1000,price3: 1000,isTransfer: false,rate: 0.3,amount: 1000,isFocus: false,}],focusLabelName:}},methods: {tabClick(row, column, cell, event){console.log(row, column, cell);row.isFocus true;this.focusLabelName column.label;},blurInput(row){row.isFocus false}}
