iview Table组件插入全选全不选单选等,不使用type: "selection"属性
时间: 2023-09-30 20:01:51 浏览: 44
如果你不想使用 `type: "selection"` 属性,你可以使用 iView Table 组件的 `render` 功能来自定义表格列的渲染方式,从而实现全选、全不选、单选等功能。
具体实现方法如下:
1. 在 `columns` 中添加渲染函数,例如:
```js
columns: [
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('span', params.row.name)
}
},
{
title: '性别',
key: 'sex',
render: (h, params) => {
return h('span', params.row.sex)
}
},
{
title: '操作',
key: 'action',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
// 单选操作
console.log('单选:', params.row)
}
}
}, '选择')
])
}
}
]
```
2. 在表格中添加全选、全不选等操作按钮,例如:
```js
<template>
<div>
<Button type="primary" size="small" @click="selectAll">全选</Button>
<Button type="primary" size="small" @click="unselectAll">全不选</Button>
<Table :columns="columns" :data="data"></Table>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
name: '张三',
sex: '男'
},
{
name: '李四',
sex: '女'
},
{
name: '王五',
sex: '男'
}
],
selectedData: []
}
},
methods: {
selectAll() {
this.selectedData = this.data
},
unselectAll() {
this.selectedData = []
}
},
computed: {
columns() {
const columns = [...yourColumnsArray]
// 添加复选框列
columns.unshift({
type: 'selection',
width: 60,
align: 'center'
})
return columns
}
}
}
</script>
```
通过添加自定义的渲染函数和操作按钮,可以实现不使用 `type: "selection"` 属性的全选、全不选、单选等功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![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)