美文网首页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