element table 跨页多选

1.

    

2.

// 分页改变

const onHandleCurrentChange = (val: number) => {

  tableDataChild.dataChank = multipleSelection.value;

  nextTick(() => {

    tableDataChild.pageNum = val;

    httpType();

  })

};

3.下次打开选中回显

nextTick(() => {

    tableDataChild.data.forEach((row:any) => {

      for( let i of tableDataChild.dataChank ) {

        if( row.id == i.id ) {

          multipleTableRef.value.toggleRowSelection(row,true);

        }

      }

    })

  });

4.清空多选

import type { ElTable } from "element-plus";

const multipleTableRefs = ref>();

multipleTableRefs.value!.clearSelection()

5.判断多选和单选是否选择,返回true和false

// 监听选择按钮

const handleSelectionChange = (rows: any, row: any) => {

if( rows.length && rows.indexOf(row) !== -1 ) {

    if( tableDataChild.dataChank.some((item: any) => item.id == row.id) == false ) tableDataChild.dataChank.push(row)

  } else {

    let idx = tableDataChild.dataChank.findIndex((item: any) => item.id == row.id)

    if( idx != -1 ) {

      tableDataChild.dataChank.splice(idx, 1)

    }

  }

};

// 全选按钮

const selectAll = (row: any) => {

if( row.indexOf(tableDataChild.data[0]) !== -1 ) {

    tableDataChild.dataChank.push( ...row )

    tableDataChild.dataChank = tableDataChild.dataChank.filter( (item: any, index: number, self: any) => {

      return self.findIndex((itemChild: any) => itemChild.topicId == item.topicId) === index

    } )

  } else {

    tableDataChild.data.forEach((item: any) => {

      let num = tableDataChild.dataChank.findIndex( (itemChild: any) => itemChild.topicId == item.topicId )

      console.log(num)

      if( num != -1) {

        tableDataChild.dataChank.splice(num,1)

      }

    })

  }

};

你可能感兴趣的:(element table 跨页多选)