<el-table :data="tableData" style="width: 850px">
<el-table-column type="index" label="序列" align="center">
</el-table-column>
<el-table-column type="name" label="名称" width="260">
<template slot-scope="scope">
<div class="rowBox">
<el-cascader :ref="'categoryName' + scope.$index" v-model="tableData[scope.$index]['categoryName']"
:options="options" placeholder="选择医院" @change="handleChange($event, scope.$index)"></el-cascader>
<span v-if="scope.$index == 0">主</span>
</div>
</template>
</el-table-column>
</el-table>
tableData: [
{
name: '',
team: '医学',
address: '北京',
contacts: 'zxx',
phone: '111111111',
categoryName:['人民医院', '医学', 'zxx']
}
],
options: [{
value: '人民医院',
label: '人民医院',
children: [{
value: '医学',
label: '医学',
children: [{
value: 'zx',
label: 'zx'
}]
}]
}],
phoneData: [
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
{ tel: '111111111111' },
]
handleChange(value, event) {
// value 选择的值
// event 当前选择的下标
this.tableData[event].name = value[0]
this.tableData[event].team = value[1]
this.tableData[event].contacts = value[2]
this.tableData[event].address = '北京'
this.tableData[event].phone = this.phoneData[event].tel
}
el-table与el-cascader 实现数据联动
于 2022-05-09 13:03:12 首次发布