antdesign vue table使用,dataIndex能不能为两个key拼接
时间: 2024-09-12 13:07:11 浏览: 39
ant-design-vue-1.4.2.zip
在Ant Design Vue Table中,`dataIndex` 属性用于指定表格列的绑定数据字段。通常情况下,它是一个字符串,对应于数据对象中的一个属性名。如果你想根据需要引用对象里的两个属性,你可以通过点(`.`)或方括号(`[]`)操作符来拼接成复合键。
例如,如果你的数据结构是这样的:
```json
{
"id": 1,
"name": "John",
"details": {
"age": 30,
"job": "Developer"
}
}
```
如果你想显示 `name` 和 `details.job` 这两个值,你可以这样做:
```javascript
<template>
<a-table :columns="columns" :data-source="data">
<!-- ... -->
</a-table>
</template>
<script>
export default {
data() {
return {
data: [
// ... 数据列表
],
columns: [
{
dataIndex: 'name', // 显示 name 字段
},
{
dataIndex: 'details.job', // 显示 details 对象的 job 属性
}
]
};
}
};
</script>
```
在这种情况下,`dataIndex` 就可以设置为 `"details.job"`,Vue 的模板解析会自动处理这个复合路径。
阅读全文