嵌套多选下拉框可编辑el-table的使用

最新推荐文章于 2025-05-20 15:21:28 发布

LiX07

最新推荐文章于 2025-05-20 15:21:28 发布

阅读量676

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/LiX07/article/details/130863825

本文介绍了一个在Vue.js应用中使用ElementUI实现表格行内编辑，特别是涉及嵌套多选下拉框的需求。在处理后台返回的以逗号分隔的字符串数据时，需要前端自定义数组进行反显。问题在于反显后数据无法编辑或实时更新，原因在于未实现双向数据绑定。通过在组件上使用v-model解决了这个问题，实现细节和原因有待深入分析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求为表格行内编辑，多选下拉

后台返回数据为,分割字符串，需前台自定义数组做反显，但是发现反显之后不可编辑或者编辑数据不会及时更新，是由于数据没有做双向数据的绑定，用this.$set加绑定，解决。现借此记录，具体实现原理和原因需具体分析。
代码如下


<div id="app">
  <template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-select v-model="scope.row.nameList" multiple collapse-tags placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
  </template>
</div>


var Main = {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "选项1,选项2",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "选项4,选项5",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "选项1",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "选项1",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  created() {
    this.tableData.forEach((item) => {
      if (item.name) {
        this.$set(item, "nameList", item.name.split(","));
      } else {
        this.$set(item, "nameList", []);
      }
    });
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");

感谢观看！标题表述不准确，翻到即是缘！