网站怎么推广,央企网站开发,长沙麓谷网站建设,东莞保安公司有哪些一、效果展示
当没有数据初始化展示如下#xff1a; 有数据展示数据#xff0c;点击出现输入框#xff0c; 失焦保存修改 二、代码实现
!-- cell-clickcellClick 当前单击的单元格 --
el-tablereftablesizeminiheight 有数据展示数据点击出现输入框 失焦保存修改 二、代码实现
!-- cell-clickcellClick 当前单击的单元格 --
el-tablereftablesizeminiheight100%:datatableDatacell-clickcellClickel-table-column width100 label排序 show-overflow-tooltiptemplate slot-scopescopespanv-ifscope.row.index dbClickIndex dbClickLabel 排序el-inputrefsortNumRefv-modelsortNumplaceholder请输入blurinputBlur(scope.row):patternnumberPattern//spandiv v-elsediv classflex_between cursor_pointerspan:style{ color: !scope.row.sortNum ? #bbb : }{{ scope.row.sortNum || 请输入 }}/spani classel-icon-edit stylecolor: #1989fe/i/div/div /template/el-table-column
/el-tabledata() {return {sortNum: null,dbClickIndex: null, // 点击的单元格dbClickLabel: , // 当前点击的列名numberPattern: [1-9]\\d*, // 正则表达式限制只能输入正整数}}methods:{// row 当前行 column 当前列cellClick(row, column, cell, event) {if (column.label 排序) {this.dbClickIndex row.indexthis.dbClickLabel column.labelthis.sortNum row.sortNum//聚焦inputthis.$nextTick(() {this.$refs.sortNumRef.focus()})}},// 失去焦点初始化inputBlur(row, event, column) {this.editThemeIndex(row)this.dbClickIndex nullthis.dbClickLabel this.sortNum null},// 编辑主题指标列表-排序字段editThemeIndex(row) {if (this.sortNum row.sortNum) returnconst params {sortNum: Number(this.sortNum) || ,id: row.id}//接口请求xxxApi(params).then((res) {if (res.code 200) {this.$message.success(修改成功)this.refreshClick()}})},// 刷新refreshClick(val) {this.pages.pageIndex 1this.initTable()}}
