<el-table ref="table" v-loading="loading" :data="roleList" @cell-click="editCell" >
<el-table-column align="center" label="展示方式" show-overflow-tooltip type="name" width="200">
<template slot-scope="scope">
<el-select
:ref="`name-${scope.row.id}`"
v-model="scope.row.technicalParamName"
v-show="scope.row.id === tabClickId && tabClickLabel === '展示方式'"
placeholder="选择展示方式"
@change="inputBlur(scope.row)"
@blur="inputBlur(scope.row)">
<el-option
v-for="option in nameOptions"
:key="option.value"
:label="option.label"
:value="option.value"
></el-option>
</el-select>
<div class="cell-text" v-show="scope.row.id !== tabClickId || tabClickLabel !== '展示方式'">{{ scope.row.technicalParamName }}</div>
</template>
</el-table-column>
</el-table>
方法如下
// 失去焦点初始化
inputBlur(item) {
this.tabClickId = "";
this.tabClickLabel = "";
//这里还可以进行其他数据提交等操作
},
editCell(item, column, cell, event){
//根据点击的单元格判断是否可变成下拉框
switch (column.label) {
case '序号': //当为序号时不变成输入框
return
default:
this.tabClickId = item.id
this.tabClickLabel = column.label
break
}
//输入框默认获取焦点
if (column.property === 'name') {
const refName = `name-${row.id}`;
this.$nextTick(() => {
this.$refs[refName].focus();
});
}
},
data中的变量
tabClickId: '',
tabClickLabel: ''
el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏
最新推荐文章于 2024-06-06 15:39:34 发布