iview实现表格的全选、反选、清空、统计、单选等功能

本文介绍了如何利用iview实现表格的全选、反选、清空操作,并详细讲解了如何统计当前选中的条数。同时,还讨论了如何将表格的多选模式转换为单选模式,提供了相关的HTML和JavaScript代码示例。
摘要由CSDN通过智能技术生成

一:实现表格的全选、反选、清空,并统计当前选中的条数

1.表格主要通过on-selection-change实现,当选中项发生变化时,就会触发该方法。
2.给 data 项设置特殊 key _checked: true 可以默认选中当前项。

html:

// 按钮
<span @click='handleSelectAll(true)'>全选</span>
<span @click='invertSelect'>反选</span>
<span @click='handleSelectAll(false)'>清空</span>

// 选中的条数
<p>已选中{
  { selection.length }}个选项</p>

// 表格
 <Table
     stripe
     border
     :columns='columns'
     :data='tableList'
     ref='table'
     @on-selection-change='changeSelection'
     :key='refresh'
 >
 ></table>

js:

data(){
	return {
		// 表格被选择的行
        selection: {
            length: 0, // 选中的总条数
            ids: [], // 所有被选择行的id
        },
    }
},
methods:{
	// 勾选项发生改变
	chang
如果你不想使用 `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"` 属性的全选、全不单选功能
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值