Element-UI之el-table嵌套select选择器

Element-UI之el-table嵌套select选择器 代码实现 html

讲解：

因为要在table里，这一列绑定的都是同一个值，但是要每一行都要数据互斥，所以在select的v-model=scope.row.data,原来是v-model=tableData.data；scope.row就是绑定的当前行的数据。

data

 data() {
        return {

            // 上级机构下拉列表
            setUp: [
                {
                    label: '正常',
                    value: 1,
                },
                {
                    label: '后置',
                    value: 2,
                },

            ],


           
            // 表格数据
            tableData: [
                {
                    ftkmName: '分摊科目名称', //分摊科目名称
                    ftkmCode: '分摊科目编码', //分摊科目编码
                    month: '2022-2-2', //分摊月份
                    setUp:'', //入账设置

                },
                {
                    ftkmName: '分摊科目名称', //分摊科目名称
                    ftkmCode: '分摊科目编码', //分摊科目编码
                    month: '2022-2-3', //分摊月份
                    setUp:'', //入账设置
                },
            ],


        };
    },

遇到的问题

获取scope.row绑定的值，在methods里之前获取值，直接this.table.data就可以了，但是我这么写以后发现根本获取不到，翻阅了好几天的博客页没找到原因，最后发现，被自己蠢到；select选择器里绑定的值存到tableData中，tableData是数组，用scope.row绑定值以后，它的值存到了tableData数组的某一个对象中了，如果没有用scope.row就是tableData中所有的值都是一样的。这时我们要根据tableData[index],拿到这一行的数据，在全选按钮定义的事件CheckAllChange(scope.$index) 中将当前行改变的数据的下标传递到方法中，以便获取当前select选择器绑定的值。
主要注意的点就是用scope.row绑定数据后，还要传递数组index获取这一行数据。
之前自己没有碰到过这种问题，就很手足无措，而且很蠢的是，自己单独定义了select绑定的data，但是应该定义在tableData里的，按理说应该scope.row.tableData.floorRange，但是事实是，加了那个tableData就不行，我这也只是尝试推敲着写，我也不是很懂为什么不可以加，因为不加scope.row的时候不就是v-model=tableData.floorRange吗？如果有路过的大佬可以给解答一下哈~

实现图片

用element-ui实现的，el-table+select，看图