element ui 中表格数据中加入选择器和开关出现的问题

问题：关于element ui 中表格数据中加入选择器和开关出现的问题。

问题描述：

• 选择器组件出现了无法选择的问题，还有开关也无法进行选择。

解决方法：

• 1、首先通过select 的 change 事件获取选择值，然后再动态的去给select的model去赋值。结果发现没有效果。
• 2、改变方法，定位到问题是表格的原因，导致列里面的每一个select组件其实都是同一个。所以得把每一个元素隔离开。这时候浏览文档找到表格文档，决定使用 slot-scope=scope,代码如下：

<el-form-item label="选择单元"  prop="floorNumber" >
				<template  slot-scope="scope" >
					<el-form-item label="选择楼层">
                                    <el-select v-model="floorSelect" placeholder="请选择楼层" class="input-inline" style="margin-right:52px" @change="getChangedData(floorSelect)">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :value="value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
				</template>
</el-form-item>

但是会发现有提示，发现这个slot-scope='scope' 已经被弃用了，所以还得改变。

<el-form-item label="选择单元"  prop="floorNumber" >
				<template  #default="scope">
					<el-form-item label="选择楼层">
                                    <el-select v-model="floorSelect" placeholder="请选择楼层" class="input-inline" style="margin-right:52px" @change="getChangedData(floorSelect)">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :value="value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
				</template>
</el-form-item>

改变之后发现可以选择了，但是多行数据会同时改变。

• 最后在select 组件的v-model上绑定scope.row.<自己定义的data名称>

<el-form-item label="选择单元"  prop="floorNumber" >
				<template  #default="scope">
					<el-form-item label="选择楼层">
                                    <el-select v-model="scope.row.floorSelect" placeholder="请选择楼层" class="input-inline" style="margin-right:52px" @change="getChangedData(floorSelect)">
                                        <el-option
                                            v-for="item in options"
                                            :key="item.value"
                                            :value="value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
				</template>
</el-form-item>

• 这时候已经完全好了

效果演示：

总结：

• 在表格中，如果要保持不同的话，需要加上scope，然后获取数据要使用scope.row.<自己定义的data名称>