一、效果展示
- 当没有数据初始化展示如下：
- 有数据展示数据，点击出现输入框， 失焦保存修改
二、代码实现
<!-- @cell-click="cellClick" 当前单击的单元格 -->
<el-tableref="table"size="mini"height="100%":data="tableData"@cell-click="cellClick"><el-table-column width="100" label="排序" show-overflow-tooltip><template slot-scope="scope"><spanv-if="scope.row.index === dbClickIndex &&dbClickLabel === '排序'"><el-inputref="sortNumRef"v-model="sortNum"placeholder="请输入"@blur="inputBlur(scope.row)":pattern="numberPattern"/></span><div v-else><div class="flex_between cursor_pointer"><span:style="{ color: !scope.row.sortNum ? '#bbb' : '' }">{{ scope.row.sortNum || '请输入' }}</span><i class="el-icon-edit" style="color: #1989fe"></i></div></div> </template></el-table-column>
</el-table>data() {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()}}
