美文网首页vue2vuejs css html
element table 跨页多选

element table 跨页多选

作者: 安徒生1997 | 来源:发表于2022-08-04 10:46 被阅读0次

1.

<el-table ref="multipleTableRef" :data="tableDataChild.data" @select="handleSelectionChange" @select-all="selectAll" style="width: 100%" current-row-key="id" row-key="id">

    <el-table-column type="selection" width="55" :reserve-selection="true"/>

</el-table>

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<InstanceType<typeof ElTable>>();

multipleTableRefs.value!.clearSelection()

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

// 监听选择按钮

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

  let selected = rows.length && rows.indexOf(row) !== -1 // true或者false

  if(selected) {

    let status = tableDataChild.dataChank.find((items: any) => {

      return items.id == row.id

    })

    if(!status) {

      tableDataChild.dataChank.push(row)

    }

  } else {

    let status = tableDataChild.dataChank.findIndex((items: any) => {

      return items.id == row.id

    })

    if(status != -1) {

      tableDataChild.dataChank.splice(status,1)

    }

  }

};

// 全选按钮

const selectAll = (row: any) => {

  let selected = row.indexOf(tableDataChild.data[0]) !== -1 // true或者false

  // console.log(selected)

  if(selected) {

    row.map((item: any) => {

      let status = tableDataChild.dataChank.find((items: any) => {

        return items.id == item.id

      })

      if(!status) {

        tableDataChild.dataChank.push(item)

      }

    })

  } else {

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

      let status = tableDataChild.dataChank.findIndex((items: any) => {

        return items.id == item.id

      })

      if(status != -1) {

        tableDataChild.dataChank.splice(status,1)

      }

    })

  }

};

相关文章

网友评论

    本文标题:element table 跨页多选

    本文链接:https://www.haomeiwen.com/subject/xajywrtx.html