vxe-table表格事件汇总

1、行点击事件（默认整行触发，也可根据表头判断触发某一列）

@cell-click="cellClickEvent" // 行点击事件
<vxe-table
   @cell-click="cellClickEvent"
   :loading="loading"
   :data="tableData">
vxe-table>

方法：

methods:{
    cellClickEvent({row,column}){
            if(column.title === '姓名'){ // 判断当表头等于姓名字段时执行一个方法
                this.drawer = true;
            }else{ // 否则执行另一个方法
                this.drawer1 = true;
            }
    },
}

2、获取列表数据 （通过 ref="xTable" 绑定获取）

// 列表数据
getData() {
   console.log(this.$refs.xTable.tableData);
},

3、重新加载表格

this.$refs.table.commitProxy("reload"); // 重新加载表格

4、多选点击事件

<vxe-table
   @checkbox-all="selectAllEvent"
   @checkbox-change="selectChangeEvent"
   :loading="loading"
   :data="tableData">
vxe-table>

方法：

methods:{
        // 全选
        selectAllEvent ({ records }) {
            // console.log(checked ? '所有勾选事件' : '所有取消事件', records)
            this.selectCheckList = records;
        },
        // 单选
        selectChangeEvent ({ records }) {
            // console.log(checked ? '勾选事件' : '取消事件', records)
            this.selectCheckList = records;
        },
}

5、行双击事件

<vxe-table
   @cell-dblclick="cellClickEvent"
   :loading="loading"
   :data="tableData">
vxe-table>

方法：

// 表格双击事件
cellClickEvent ({ row }) {
   console.log(row)     
},

更多会持续更新！！！