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

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

代码实现

html

 <el-table :data="tableData" border style="width: 100%" >
                <el-table-column prop="ftkmName" label="分摊科目名称" header-align="center">
                </el-table-column>

                <el-table-column prop="ftkmCode" label="分摊科目编码" header-align="center">
                </el-table-column>
                <el-table-column prop="month" label="分摊月份" header-align="center">
                </el-table-column>

                <el-table-column label="入账设置" header-align="center" prop="setUp">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.setUp" size="medium" style="width:100%">
                            <el-option v-for="item in setUp" :key="item.label" :label="item.label" :value="item.label">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>

讲解：

因为要在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，看图