ant design vue1.7 table添加复选框
时间: 2023-09-07 13:13:35 浏览: 163
在 Ant Design Vue 1.7 中,可以通过 `a-table` 的 `columns` 属性中添加一个 `an-checkbox-column` 列来添加复选框。
以下是一个示例代码:
```html
<template>
<a-table :columns="columns" :data-source="dataSource" row-key="id" @row-click="onRowClick">
<a-table-column title="#" dataIndex="id" />
<a-table-column title="姓名" dataIndex="name" />
<a-table-column title="年龄" dataIndex="age" />
<a-table-column title="地址" dataIndex="address" />
<a-table-column title="操作" :render="renderAction" />
<a-table-column
title="选择"
:width="80"
:custom-render="renderCheckbox"
:fixed="true"
align="center"
/>
</a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{ id: 1, name: '张三', age: 18, address: '北京市朝阳区' },
{ id: 2, name: '李四', age: 20, address: '上海市浦东新区' },
{ id: 3, name: '王五', age: 22, address: '广州市天河区' }
]
};
},
methods: {
renderAction(h, { row }) {
return h('a', '编辑');
},
renderCheckbox(h, { row }) {
return h('a-checkbox', {
props: {
value: row.checked
},
on: {
input: value => {
row.checked = value;
}
}
});
},
onRowClick(row) {
row.checked = !row.checked;
}
},
computed: {
columns() {
return [
// 其他列定义
{
title: '选择',
dataIndex: 'checked',
width: 80,
align: 'center',
render: (text, record) => {
return <a-checkbox v-model={record.checked} />;
}
}
];
}
}
};
</script>
```
在这个示例中,我们添加了一个 `an-checkbox-column` 列,并在 `renderCheckbox` 方法中渲染了复选框。同时,我们在 `columns` 属性中添加了一个 `checked` 列,并在 `render` 方法中渲染了复选框。我们还添加了一个 `onRowClick` 方法,用于在行点击时切换复选框的状态。
在实际使用中,您可以根据实际需求对复选框的样式和行为进行自定义。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)