1.前言
公司开发时需要实现一个在表格内可编辑的列,通过点击按钮控制显示输入框,编辑单元格内容。对插槽没啥理解也没用过,导致使用过程中遇到了一些问题。
2.示例
2.1效果展示
3.完成步骤
3.1遇到的问题
直接使用v-if和v-else控制显示和隐藏,会导致修改时整列或整行都被修改,于是乎开始在网上搜索。
起初看到这位老哥写的文章,借鉴实现后出现了问题
https://blog.csdn.net/hongtoushan/article/details/114130938
使用document.querySelector()方法修改style的display属性,在handleCellClick()中可以修改,并且页面也可以渲染。
但是在cancelEditable()中display属性可以修改,在style中显示display属性没变化,无法实现效果。钻了一天牛角尖后,添加了一个boolean类型的属性,通过v-slot="scope.row.xxx"访问实现
3.2实现的部分代码
template
<el-table :data="floorTable.list" v-show="floorTable.show" v-loading="floorTable.loading"
:header-cell-style="{background:'#FAFAFA', color: '#8F9BB3'}"
>
<el-table-column align="center" min-width="160" label="楼层" prop="floor"/>
<el-table-column align="center" min-width="160" label="别名" prop="name">
<template v-slot="scope">
<el-input v-if="scope.row.edit" v-model="scope.row.name" size="small" :style="'width:90px'"/>
<span v-else>{{ scope.row.name }}</span>
<el-button v-if="scope.row.edit" class="ml10" type="primary" size="small"
icon="el-icon-check" @click="saveCellEdit(scope.row)"
/>
<el-button v-else class="ml10" type="primary" size="small" icon="el-icon-edit"
@click="cellNameEdit(scope.row)"
/>
</template>
</el-table-column>
</el-table>
data
floorTable: {
show: false,
otherNameShow: false,
buttonShow: true,
dWidth: '850px',
width: 'width:260px',
queryParams: {
baseInfoLiftNumber: '',
pageNum: 1,
pageSize: 3
},
list: [{
floor: '',
name: ''
}],
loading: false,
total: 0
}
}
methods
//生成楼层信息
generateTable() {
let _ = this
_.floorTable.list = []
_.floorTable.show = true
_.floorTable.total = parseInt(_.dialog2.formInfo.aboveGroundFloor) - parseInt(_.dialog2.formInfo.underGroundFloor)
for (let i = _.dialog2.formInfo.underGroundFloor; i <= _.dialog2.formInfo.aboveGroundFloor; i++) {
if (i == 0) {
continue
}
_.floorTable.list.push({
floor: i,
name: i,
edit: false
})
}
},
saveCellEdit(row) {
let _ = this
row.edit = false
},
cellNameEdit(row) {
let _ = this
row.edit = true
},
总结
插槽+v-if,实现el-button控制单元格的元素达成需求效果
代码功能已实现,类,id,data中的属性等有的没用上,后续会优化修改