问题:关于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名称>