此方法適用于下拉多選疲迂,單選需自主調(diào)整(可通過(guò)選擇tabel列表做限制)
html部分:
<el-select v-model="selectId" multiple placeholder="請(qǐng)選擇" 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數(shù)據(jù)
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) {
// 選擇列表中的復(fù)選框后 改變下拉框綁定的model
this.selectId = val.map(item => {
return item.id
})
},