实现表格可编辑
参考：el-table 中实现表格可编辑_el表格编辑_快乐征途的博客-CSDN博客
按行保存数据，每行数据最后都有一个保存按钮，如下图所示
使用的是<template>嵌套<el-input>
完整代码如下：
<template>
<div>
<el-table
:data="tableData"
size="mini"
style="width: 600px"
@cell-click="handleCellClick"
>
<el-table-column
prop="date"
label="日期"
width="180">
<template class="item" slot-scope="scope">
//初始页面先将input隐藏（display:none）显示txt
<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" class="item__input" v-model="scope.row.date" style="display:none;"></el-input>
<div class="item__txt">{{scope.row.date}}</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
<template class="item" slot-scope="scope">
<el-input class="item__input" v-model="scope.row.name" placeholder="请输入姓名" style="display:none;"></el-input>
<div class="item__txt">{{scope.row.name}}</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
// 表格数据
tableData: [{
id: 0,
date: '2016-05-02',
name: '王小虎'
}, {
id: 1,
date: '2016-05-04',
name: '王小虎'
}, {
id: 2,
date: '2016-05-01',
name: '王小虎'
}, {
id: 3,
date: '2016-05-03',
name: '王小虎'
}],
// 需要编辑的属性
editProp: ['date', 'name'],
// 保存进入编辑的cell
clickCellMap: {}
}
},
methods: {
/** 点击cell */
handleCellClick (row, column, cell, event) {
//property是该列绑定的字段名称，若是日期列，则property是date
const property = column.property
if (this.editProp.includes(property)) {
// 保存cell，cell是指具体点击的表格中的单元格
this.saveCellClick(row, cell)
//querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。参数是必填项
//隐藏txt显示input输入框
cell.querySelector('.item__txt').style.display = 'none'
cell.querySelector('.item__input').style.display = 'block'
//该单元格的input获得焦点
cell.querySelector('input').focus()
}
},
/** 保存进入编辑的cell */
//将进入编辑的cell存入clickCellMap数组中，后面取消编辑状态的时候遍历此数组就可以了
saveCellClick (row, cell) {
const id = row.id
if (this.clickCellMap[id] !== undefined) {
if (!this.clickCellMap[id].includes(cell)) {
this.clickCellMap[id].push(cell)
}
} else {
this.clickCellMap[id] = [cell]
}
},
/** 保存数据（这部分内容可以添加到保存按钮中） */
save (row) {
const id = row.id
// 取消本行所有cell的编辑状态
this.clickCellMap[id].forEach(cell => {
this.cancelEditable(cell)
})
this.clickCellMap[id] = []
},
/** 取消编辑状态 */
cancelEditable (cell) {
cell.querySelector('.item__txt').style.display = 'block'
cell.querySelector('.item__input').style.display = 'none'
},
}
}
</script>
是否可编辑权限设置
此时，我的表格数据中有一个字段是创建人，若该条数据不是当前系统登陆的用所创建的，则当前用户没有权限编辑此条数据，也就是说用户只能编辑自己创建的那条数据。
需要添加如下代码：
data(){
return{
username:'',
tableDisabled:false
}
},
created(){
this.getUserName()
},
methods:{
getUserName(){
//若该系统login页面使用的是localStorage存储的用户信息，先打印看一下localStorage然后再获取相应字段
this.username = localStorage.getItem("username")
},
/** 点击cell */
handleCellClick (row, column, cell, event) {
const us = row.createUser;
if(this.username == us){
this.tableDisabled = true;
}else{
this.tableDisabled = false;
}
if(!this.tableDisabled){
this.$message.warning("您无权限更改此条数据")
}else{
const property = column.property
if (this.editProp.includes(property)) {
this.saveCellClick(row, cell)
cell.querySelector('.item__txt').style.display = 'none'
cell.querySelector('.item__input').style.display = 'block'
cell.querySelector('input').focus()
}
}
},
}
表格点击下一页以后隐藏input
若当前页的表格没有点击保存按钮将input输入框隐藏，直接点击别的页面，那么别的页面input输入框的显示状态和之前页面是一样的，这样可能会导致该页面数据不是该用户创建的，但是那条数据缺显示了可编辑的输入框。
导致如上bug的原因是：根据cell设置的input的状态，但是分页了以后，第一页和第二页相同的单元格都显示input。比如：我点击左上角的单元格显示输入框，当进入下一页的时候，左上角的输入框同样是显示的状态。
现在，需要点击分页进入别的页面之前，将所有的input输入框隐藏。
在表格分页条的current-change事件中添加代码：
currentChangeHandle(val){
this.pageNum = val;
let id = ''
//此时tableData的数据还是之前的页面数据还未更新
for(let i=0;i<this.tableData.length;i++){
id = this.tableData[i].id;
//如果当前行不存在input显示，this.clickCellMap[id]是undefined
if(this.clickCellMap[id] !==undefined){
//取消cell编辑状态，显示txt
this.clickCellMap[id].forEach(cell=>{
//此方法在最上面的代码中写了
this.cancelEditTable(cell);
})
this.clickCellMap[id] = []
}
}
//调用后端接口更新表格数据
this.getList()
}
