iview Table组件插入全选全不选单选等,不使用type: "selection"属性
时间: 2023-09-30 15:01:51 浏览: 123
qml tableview 全选,单选
5星 · 资源好评率100%
如果你不想使用 `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"` 属性的全选、全不选、单选等功能。
阅读全文