【Vue.$set】 遍历出来的el-select可以实现对el-option对应的选中
一、效果图以及效果:选中其中一行,其他行不会被选中,不会收影响二:代码:<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%><el-table-column prop="files" label="文件名称"></el-...
·
一、效果图以及效果:选中其中一行,其他行不会被选中,不会收影响
二:代码:
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%>
<el-table-column prop="files" label="文件名称"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-select placeholder="更多" @change="changeSelect(scope.row.id)" v-model="state[scope.row.id]">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
data () {
return {
// table数据
tableData: [
{files: 'test.rvt', filesCode: '1514115864420768', user: 'admin', filesBig: '29.6Mb', jingState: '未开始', updateTime: '2016-09-21', id: '0'},
{files: 'test.rvt', filesCode: '1514115864420768', user: 'admin', filesBig: '29.6Mb', jingState: '未开始', updateTime: '2016-09-21', id: '1'},
{files: 'test.rvt', filesCode: '1514115864420768', user: 'admin', filesBig: '29.6Mb', jingState: '未开始', updateTime: '2016-09-21', id: '2'},
{files: 'test.rvt', filesCode: '1514115864420768', user: 'admin', filesBig: '29.6Mb', jingState: '未开始', updateTime: '2016-09-21', id: '3'}
],
// 下拉框数据
options: [
{value: '选项1', label: '发起解析'},
{value: '选项2', label: '下载'},
{value: '选项3', label: '删除'}
],
state: {}
}
},
mounted () {
this.tableData.forEach(item => {
this.$set(this.state, item.id, '') // 父、 子、 子的赋值
})
},
// 下拉框的选择 可以打印看
changeSelect (id) {
console.log(id, this.state[id])
}
更多推荐
已为社区贡献17条内容
所有评论(0)