此方法适用于下拉多选,单选需自主调整(可通过选择tabel列表做限制)
html部分:
<el-select v-model="selectId" multiple placeholder="请选择" style="width: 200px">
<!-- 直接写入tabel表格 -->
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"/>
<el-table-column prop="date" label="日期" width="120"/>
<el-table-column prop="name" label="姓名" width="120"/>
</el-table>
<!-- 隐藏原有下拉列表 -->
<el-option v-show="false" v-for="(item, index) in tableData" :key="index" :label="item.name"
:value="item.id" />
</el-select>
js部分 - 变量:
selectId: '', // 下拉选择框绑定的model
tableData: [{ // 下拉table数据
id:0,
date: '2016-05-03',
name: '王小虎1',
}, {
id:1,
date: '2016-05-02',
name: '王小虎2',
}, {
id:2,
date: '2016-05-04',
name: '王小虎3',
}, {
id:3,
date: '2016-05-01',
name: '王小虎4',
}],
js部分 - 事件:
handleSelectionChange(val) {
// 选择列表中的复选框后 改变下拉框绑定的model
this.selectId = val.map(item => {
return item.id
})
},