怎么能拿到地区的3个数据在table组件上反显出来
时间: 2024-03-17 21:42:41 浏览: 71
如果您希望在表格中反显所选省市区的数据,您可以将所选省市区的数据保存在表格数据源的对应记录中,并使用 `scoped slots` 来渲染表格中的省市区列。
下面是一个示例代码:
```
<template>
<div>
<a-table :columns="columns" :data-source="dataSource">
<template slot="region" slot-scope="text, record">
{{ record.province }} {{ record.city }} {{ record.district }}
</template>
</a-table>
<a-cascader v-model="selectedOptions" :options="options" :show-all-levels="true" @change="handleChange" />
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: 'Zhejiang',
label: 'Zhejiang',
children: [
{
value: 'Hangzhou',
label: 'Hangzhou',
children: [
{
value: 'Xihu',
label: 'West Lake'
}
]
}
]
}
],
selectedOptions: [],
dataSource: [
{
key: '1',
name: 'John',
age: 32,
province: '',
city: '',
district: ''
}
]
}
},
methods: {
handleChange(value, selectedOptions) {
const province = selectedOptions[0].label;
const city = selectedOptions[1].label;
const district = selectedOptions[2].label;
this.selectedOptions = selectedOptions;
this.dataSource[0].province = province;
this.dataSource[0].city = city;
this.dataSource[0].district = district;
}
},
computed: {
columns() {
return [
{
title: 'Name',
dataIndex: 'name'
},
{
title: 'Age',
dataIndex: 'age'
},
{
title: 'Region',
dataIndex: 'region',
scopedSlots: { customRender: 'region' }
}
]
}
}
}
</script>
```
在上述示例中,我们将所选省市区的数据保存在表格数据源中的对应记录中,并使用 `scoped slots` 来渲染表格中的省市区列。在 `handleChange` 方法中,我们将所选省市区的数据保存到表格数据源中,并将其渲染到表格中。您可以根据您的需求进行修改。
阅读全文