vue+elementUI el-table 点击表格的某一单元格变成输入框el-input
方法一添加两个方法@cell-click="tabClick" :row-class-name="tableRowClassName"点击具体的单元格通过v-if="scope.row.index === tabClickIndex"判断<el-table class="table" :data="dataList" @cell-click="tabClick" :row-class-nam
·
方法一
添加两个方法@cell-click="tabClick" :row-class-name="tableRowClassName"
点击具体的单元格通过v-if="scope.row.index === tabClickIndex"
判断
<el-table class="table" :data="dataList" @cell-click="tabClick" :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" style="width: 100%">
<el-table-column prop="sqrq" label="还款金额" :width="isInputBlur?'130px':'80px'" show-overflow-tooltip>
<template slot-scope="scope">
<el-input
v-if="scope.row.index === tabClickIndex"
ref="editInput"
v-model="scope.row.sqrq"
v-focus // 聚焦: 看上一篇博客
size="small"
type="number"
@blur="inputBlur(scope.row)" // 失焦: 看上一篇博客
/>
<span v-else>{{ scope.row.sqrq }}</span>
</template>
</el-table-column>
<el-table-column prop="sqrq" label="承担部门" show-overflow-tooltip />
<el-table-column prop="sqrq" label="项目编码" show-overflow-tooltip />
</el-table>
<script>
export default {
data() {
return {
...
tabClickIndex: null, // 列表当前点击行的index
...
}
},
methods: {
...
// 点单击到表格--还款金额-单元格时触发
cellClick(row, column, cell, event) {
console.log('cellClick',row, column, cell, event)
if (row.column.label === '还款金额') {
this.tabClickIndex = row.row.index
this.isInputBlur = true
} else {
this.tabClickIndex = null
this.isInputBlur = false
}
},
tableRowClassName({ row, rowIndex }) {
// 把每一行的索引放进row
row.index = rowIndex
},
/* 还款金额----失去焦点时 */
inputBlur(row) {
console.log('传进来的值', row)
this.tabClickIndex = null
this.isInputBlur = false
},
...
}
}
方法二
更多推荐
已为社区贡献4条内容
所有评论(0)