vue：遇到的坑之-----自定义可编辑表格(element-ui)

补充下拉框编辑的代码

[code]<el-table-column align="center" width="150" label="label">
<template slot-scope="scope">
<span v-show="!scope.row.isEditCellData">{{scope.row.data}}</span>
<el-select
v-if="scope.row.isEditCellData"
v-model="scope.row.data"
placeholder="请选择数据"
v-on:change="updateRow(scope.row,'data')"
>
<el-option
v-for="item in dataOptions"
:key="item.id"
:value="item.id"
:label="item.value"
></el-option>
</el-select>
</template>
</el-table-column>

// dataOptions的数据我就不列出来了
// isEditCellData为判断是否能编辑的标识，如果没有这个字段可以在获取的时候添加进去，具体代码在下面可以找到
// v-on:change="updateRow(scope.row,'data')" 这个事件的意思是当我进行了下拉选项的选择后就触发

[code]// 修改子表单元格事件
updateRow(row, property) {
var dataObj= {};
dataObj.id = row.id;
dataObj[property] = row[property];
this.$axios({
method: "post",
url: `url`,
data: dataObj// data根据自己的接口传需要的参数，我这里只需要传id和改变的字段
}).then(res => {
if (res.data.type == "success") {
this.$message.success(res.data.content);
this.getList(); // 这个函数是获取表格信息的方法，相当于刷新table数据
} else {
this.$message({
type: "error",
message: res.data.content
});
}
});
},

-----------------------------------------------------------------------------------

这个是input框编辑的代码

首先表头里需要添加 cell-dbclcik事件

   以下是代码：

[code]<el-table :data="tableData" border @cell-dblclick="cellDblClick">
<el-table-column prop="name" label="名字">
<template slot-scope="scope">
<span v-if="!scope.row.isEditCell">{{scope.row.lastMoney}}</span>
<el-input v-if="scope.row.isEditCell"
:autofocus="true"
v-model="scope.row.isEditCell"
placeholder="请输入名字"
@blur="cellBlur(可传参)"  //失去焦点事件
></el-input>
</template>
</el-table-column>
</el-table>

[code]data(){
return {
tableData:[] //要渲染的表数据
}
}

 注意：input框是根据字段isEditCell的true/false来判断是否出现，如果后台传递过来的数据中没有，可以自己手动添加进去

[code]    // 获取列表
getTableList() {
this.$axios
.get('url')
.then(res => {
var th = this
th.tableData = res.data.data.rows;  // 渲染表数据

// 遍历表数据，为每条数据添加isEditCell属性
var length = th.tableData.length;
for (var i = 0; i < length; i++) {
th.tableData[i].isEditCell = false;
}

});
},

[code]methods:{
// 单元格双击事件
cellDblClick(row, column, cell, event) {
// 判断修改的字段名，我要修改name里的内容
// column里有个属性叫property
if (column.property == "name") {
row.isEditCell = true; //input框出现，span消失
this.onCellDblClickInput(event); //input框双击回调事件
}
},

// input框双击回调事件
onCellDblClickInput(event) {
//要等到input框渲染到页面后才能获取焦点
this.$nextTick(function() {
$(event.target).children().find("input").focus(); //获取input焦点
});
},

// 编辑框失去焦点，即完成编辑
cellBlur(row) {
// 数据提交
this.updateRow(可传参);
},

// 修改子表单元格事件，即失去焦点后，向后台发送请求
updateRow(可传参) {
var that = this;
this.$axios.post({
url: 'url'’,
data:data
}).then(res => {
if (res.data.type == "success") {
this.$message.success("修改成功！");

// 成功就刷新表
this.getTableList()

} else {
this.$message({
type: "error",
message: res.data.content
});
}
});
}
}

然后就可以啦，效果我就不展示啦

其实有很多文章都写了这个功能，而且也比我的要完善很多。

我主要是为了记录自己曾经的疑难点^_^，所以希望大家不要在意哈

有问题欢迎指出=3=