vue ant design table 展开事件
时间: 2023-07-04 14:06:37 浏览: 51
在 Vue Ant Design 中,可以使用 `expandable` 属性来实现 Table 行的展开和收起。具体实现步骤如下:
1. 在 Table 组件中设置 `expandable` 属性为一个对象,该对象包含两个属性:`expandedRowRender` 和 `onExpand`。
```html
<template>
<a-table :columns="columns" :data-source="data" :expandable="expandable">
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [...],
data: [...],
expandable: {
expandedRowRender: (record) => {
// 返回展开行的内容
},
onExpand: (expanded, record) => {
// expanded 为该行是否展开的状态,record 为当前行的数据
}
}
}
}
}
</script>
```
2. 在 `expandedRowRender` 属性中定义展开行的内容。该属性需要一个函数作为值,该函数接收一个参数 `record`,表示当前行的数据。在该函数中返回需要展开的内容。
```html
<template>
<a-table :columns="columns" :data-source="data" :expandable="expandable">
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [...],
data: [...],
expandable: {
expandedRowRender: (record) => {
// 返回展开行的内容
return (
<p>{ record.description }</p>
)
},
onExpand: (expanded, record) => {
// expanded 为该行是否展开的状态,record 为当前行的数据
}
}
}
}
}
</script>
```
3. 在 `onExpand` 属性中定义展开和收起的事件。该属性需要一个函数作为值,该函数接收两个参数:`expanded` 和 `record`,分别表示该行是否展开的状态和当前行的数据。
```html
<template>
<a-table :columns="columns" :data-source="data" :expandable="expandable">
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [...],
data: [...],
expandable: {
expandedRowRender: (record) => {
// 返回展开行的内容
return (
<p>{ record.description }</p>
)
},
onExpand: (expanded, record) => {
// expanded 为该行是否展开的状态,record 为当前行的数据
console.log(expanded, record)
}
}
}
}
}
</script>
```
完成上述步骤后,即可实现 Vue Ant Design Table 行的展开和收起。