vue 部分代码展示
关键点在于el-select中得v-model部分 需要使用scope.row[scope.column.property]来绑定某一个单元格,否则按网上大部分文章中使用scope.row.xxx会让整行的下拉都随某一个下拉值的改变而改变
<el-table
class="clearfix"
:key="tableKey"
border
fit
:data="list"
highlight-current-row
style="width: 100%">
<el-table-column
prop="id"
label="ids"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="列名">
</el-table-column>
<el-table-column
prop="value1"
label="数据项1">
</el-table-column>
<el-table-column
prop=""
label="数据项2">
</el-table-column>
<el-table-column
prop=""
label="选择项1">
<template slot-scope="scope">
<el-select v-model="scope.row[scope.column.select1]" placeholder="请选择:">
<el-option
v-for="item in scope.row.select1"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column
prop="select2"
label="选择项2">
<template slot-scope="scope">
<el-select v-model="scope.row[scope.row.select2]" placeholder="请选择模板:">
<el-option
v-for="item in scope.row.select2"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>