【vue笔记】el-table中嵌套的el-select 的取值问题

 前言

        最近开始在公司实习，想记录一下自己遇到的一些问题和解决办法，不一定完全正确，还在学习中……如果有错误，欢迎批评指正，谢谢。

---

• 原型的要求是table中每一行都有一个select，且每一个select之间互不干扰
• 

 vue代码如下：

细节

【使用slot-scope=“scope”】

element-ui的官方解释是：

 也就是说使用<template scope="scope">后，通过scope.row.键名，可以获取所在行的某一列的数据。

关于scope更多的理解，看到了一篇比较详细的文章，记录下链接：

 https://blog.youkuaiyun.com/tg928600774/article/details/81945140

【后端需要同时传值key和value】

一开始我想在@change中获取select的选项值，但是发现我还是没法直接改变传给后端的数据。

后来查到：value是可以传多值的。于是取了个巧，直接在：value中同时绑定了value和key的值，在给后端传参时，用.split(“|”)的方法分隔开value和key，这样就可以同时把两个值都取到了。

vue：

 js：

 

【再记录一下label和value的绑定】

 v-modal 绑定的值为当前被选中的el-option的 value 属性值 

value是选项的值（要传给后端的数据取值就修改这里：value）

label值既显示在select中的标签