<el-table ref="goodOrder" :data="goodOrder" :row-key="getRowKeys" v-loading="loadingGoodOrder" border  @row-click="toggleSelection" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :reserve-selection="true" fixed header-align="center" align="center"/>
</el-table>

data() {
    return {
        goodOrder:[],
        loadingGoodOrder:true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 勾选的表格数据
        intoMaterialData:[],
    }
},
methods:{
    // 选择行 勾选复选框
    toggleSelection(row) {
      this.$refs.goodOrder.toggleRowSelection(row);
    },
    getRowKeys(row) {
      return row.id;
    },
    // 表格多选框 选中数据
    handleSelectionChange(selection){
        this.intoMaterialData = selection;
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
    },
    close(){
      // 取消表格的勾选 
      this.goodOrder.forEach(row => {
        this.$refs.goodOrder.toggleRowSelection(row,false);
      })
    }
}

Logo

前往低代码交流专区

更多推荐