vue+Element中table表格实现可编辑（select下拉框）

vue+Element中中table表格实现可编辑（表格实现可编辑（select下拉框）下拉框）

主要介绍了vue+Element中table表格实现可编辑，实现select下拉框，文中示例代码介绍的非常详细，具有一定

的参考价值，感兴趣的小伙伴们可以参考一下

最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的

数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的下拉框数据也是根据id

动态生成的，内容不同；有点类似于树形二级状态，后面的下拉框数据来源并没有在前面内容里，而是另外一个接口查询，具

体操作如下：

HTML代码：

4.最后点击按钮提交流程配置；

<el-table :data="processNodelist" style="width: 100%" border stripe>

<el-table-column type="index" label="序号" width="50"></el-table-column>

<el-table-column prop="nodename" label="流程节点名称"></el-table-column>

<el-table-column label="处理人名称">

<template slot-scope="scope">

<el-select v-model="scope.row.proJbruserValue" @focus="getDatalist(scope.row)" placeholder="请选择" filterable allow-create>

<el-option v-for="item in projectJbrUserlist " :key="item.id" :label="item.username" :value="item.id">

</el-option>

</el-select>

return {

processNodelist: [], // 流程节点数据

projectJbrUserlist: [], // 处理人员数据

nodeidlist: [], // 所有流程节点Id

selectedUserlist: [], // 被选中的处理人员id数组

}

},

created() {

this.getProcessNodelist();

},

developerid: this.sessionInfo.companyId

});

if (res.code !== 0) {

return this.$message.error('获取流程节点数据失败');