iview 表格选中触发的事件

    技术2023-12-03  100

    在后台管理系统写表格时,默认每行数据前都有一个选择按钮,一般是选择选中删除,因此,就有多选删除,单选删除,全选删除。

    下面iview 的文档说明:

    通过给 columns 数据设置一项,指定 type: 'selection',即可自动开启多选功能。

    给 data 项设置特殊 key _checked: true 可以默认选中当前项。

    给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。

    正确使用好以下事件,可以达到需要的效果:

    @on-select,选中某一项触发,返回值为 selection 和 row,分别为已选项和刚选择的项。@on-select-all,点击全选时触发,返回值为 selection,已选项。@on-selection-change,只要选中项发生变化时就会触发,返回值为 selection,已选项。

     

    记录如下:

    <Table ref="selection" border stripe  :columns="tableColumns" :data="data" @on-select="select" @on-select-all="selectAll" @on-selection-change="selectChange"></Table>

     

    select(selection,row){

                let that = this;

                that.selectList = selection;

                console.log(selection);

            },

            selectAll(selection){

                let that = this;

                that.selectList = selection;

                console.log(selection);

            },

            selectChange(selection){

                let that = this;

                that.selectList = selection;

                console.log(selection);

            },

     

    Processed: 0.011, SQL: 9