很多人遇到表格中嵌套select的情况,这种时候因为表格很多行,就会有很多个选择器,会出现点一个选择器其他的选择器都选中了同一个角标的值。所以我们要做到区分单独开来。
效果图
拿到的值格式
这样的,直接就放在了tabledata内。
代码
html
重点!!!!v-model="scope.row[scope.column.property]"这一句话
<el-table :data="tableData" style="width: 100%" size="mini">
<el-table-column prop="A" label="名称"> </el-table-column>
<el-table-column prop="B" label="开始时间"> </el-table-column>
<el-table-column prop="C" label="结束时间"> </el-table-column>
<el-table-column prop="D" label="操作区分">
<template slot-scope="scope">
<el-select
v-model="scope.row[scope.column.property]"
placeholder="操作标记"
size="mini"
>
<el-option
v-for="(item,index) in options"
:key="index"
:label="item"
:value="item"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="E" label="操作分类">
<template slot-scope="scope">
<el-select
v-model="scope.row[scope.column.property]"
placeholder="操作分类"
size="mini"
>
<el-option
v-for="(item,index) in options2"
:key="index"
:label="item"
:value="item"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="F" label="归类">
<template slot-scope="scope">
<el-select
v-model="scope.row[scope.column.property]"
placeholder="归类"
size="mini"
>
<el-option
v-for="(item,index) in options3"
:key="index"
:label="item"
:value="item"
>
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
data:
获取的值会存在对应的tabledata内。如果想反选就直接在tabledata改值就行,比如给D内写值,那么图表上的select就会默认选中
tableData: [
{
A: "作业分析动作1",
B: "16.44",
C: "31.29",
D:'',
E:'',
F:''
},
{
A: "作业分析动作2",
B: "34.24",
C: "43.11",
D:'',
E:'',
F:''
},
{
A: "作业分析动作3",
B: "48.64",
C: "70.26",
D:'',
E:'',
F:''
},
{
A: "作业分析动作4",
B: "76.15",
C: "104.25",
D:'',
E:'',
F:''
},
],