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() {
   // 方法1：
   console.log(this.$refs.xTable.tableData);
   // 方法2：
   this.$refs.xTable.getInsertRecords();
},

3、重新加载表格

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

4、多选事件方法

<vxe-table @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent"
   :loading="loading" :data="tableData">
    <vxe-table-column type="checkbox" fixed="left" width="60"></vxe-table-column>
    <vxe-table-column type="seq" title="序号" fixed="left" width="60"></vxe-table-column>
</vxe-table>

方法：

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

5、单选事件方法

<vxe-table @radio-change="handleRowSelection" :loading="loading" :data="tableData">
    <vxe-table-column type="radio" fixed="left" width="50"></vxe-table-column>
    <vxe-table-column type="seq" title="序号" fixed="left" width="60"></vxe-table-column>
</vxe-table>

方法：

methods:{
   handleRowSelection ({ row }) {
       this.selectRadio = row;
   },
}

6、行双击事件

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

方法：

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

7、动态插入&删除行

<div class="but-grout">
   <el-button  @click="insertEvent(-1)" type="primary">新增</el-button> 
   <el-button  @click="deleteAllBtn()" type="danger">批量删除</el-button> 
</div> 
<vxe-table
   @cell-dblclick="cellClickEvent" :loading="loading" @cell-click="cellClickEvent"
   @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent" :edit-config="        
   {trigger: 'click', mode: 'cell'}" :data="tableData">
    <vxe-table-column type="checkbox" fixed="left" width="60"></vxe-table-column>
    <vxe-table-column type="seq" title="序号" fixed="left" width="60"></vxe-table-column>
</vxe-table>

方法：

methods:{
        // 全选
        selectAllEvent ({ records }) {
            // console.log(checked ? '所有勾选事件' : '所有取消事件', records)
            this.selectCheckList = records;
        },
        // 单选
        selectChangeEvent ({ records }) {
            // console.log(checked ? '勾选事件' : '取消事件', records)
            this.selectCheckList = records;
        },
        // // 新增表格行
        async insertEvent (row) {
            const $table = this.$refs.xTable;
            const rid = Date.now(); // 设置一个动态的行id
            const record = {
                rowId: rid,
            }// 可配置默认值
            const { row: newRow } = await $table.insertAt(record, row)
            await $table.setActiveCell(newRow)
            await $table.setActiveRow(newRow)
        },
        // 删除选中行
        deleteAllBtn(){
            const $table = this.$refs.xTable
            if(this.selectList.length === 0){
                this.$message.warning('请选择需要删除的数据！');
                return
            }
            if ($table) {
                $table.removeCheckboxRow()
            }
        },
        // 行点击事件
        cellClickEvent({row,rowIndex}){
            this.rowVal = row;
        },
}

8、列表多选时，配置默认选中，和禁用

<vxe-table
   @cell-dblclick="cellClickEvent"
   :loading="loading" row-id="id"
   :checkbox-config="{checkRowKeys: defaultSelecteRows, highlight: true, checkMethod: checCheckboxkMethod}" 
   @checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent"
   :data="tableData">
</vxe-table>

解析：row-id='id',是指需要根据ID来判断是否选中

methods:{
            let params = {
                moduleOrderId: row.moduleOrderId,
                stationSn: this.rowObj.wipSn
            }
            this.defaultSelecteRows = [];
            api.querySnBindRelationShip(params).then((res) => {
                this.tableData4 = res.data.data;
                this.tableData4.map((item) => {
                    if(item.isBind == 1){
                        this.defaultSelecteRows.push(item.isBind)
                    }
                })
                this.$nextTick(() => {
                    // 使用 reloadData 或 updateData 刷新右侧表格
                    this.$refs.xTable4.reloadData(this.tableData4);
                });
            })
}

checCheckboxkMethod配置禁用

methods:{
     checCheckboxkMethod ({ row }) {
            return row.isBind != 2;
     },
}

9、全量校验及单行校验

<vxe-table resizable ref="xTable" border show-overflow highlight-hover-row :data="tableData" :edit-rules="validRules">
</vxe-table>

async okBtn(){
   // 全量校验
   const $table = this.$refs.xTable
   const errMap = await $table.validate().catch(errMap => errMap)
   if (errMap) {
       this.$message.warning('请完整填写数据');
   } else {
        console.log('校验成功！');        
   }
   // 单行校验
   const $table = this.$refs.xTable
   const errMap = await $table.validate(row).catch(errMap => errMap)
   if (errMap) {
       this.$message.warning('请完整填写数据');
   } else {
        console.log('校验成功！');        
   }
},

单行只需要在 $table.validate(row) 里边传入行数据 row 即可

更多会持续更新！！！