• element table切换分页不勾选的自带方法


    场景一:没有回显勾选的情况

    table表格加row-key标识选中行唯一标识,多选框加reserve-selection设置为true

    <template>
     <el-table
        v-loading="loading"
        ref="multipleTable"
        tooltip-effect="dark"
        :row-key="getRowKey">
        <el-table-column label="" type="selection" width="50" align="center" :reserve-selection="true"></el-table-column>
     </table>
    </template>
    <script>
      methods: {
      // 指定一个key标识这一行的数据
        getRowKey (row) {
          return row.id
        }
      }
    </script>

     场景二:有回显勾选情况

    <template>
     <el-table v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        @select="onTableSelect"
        @select-all="onTableSelectAll"
         tooltip-effect="dark">
    <template>
    <script type="text/javascript">
        methods: {
             // 取消默认选中项(单个勾选)
            /**
             *@list 接口返回的默认勾选数组
             *@id 列表唯一标识
             */ 
            onTableSelect (rows, row) {
              if (!rows.includes(row)) {
                const index = this.list.findIndex(item =>         
                 item.id=== row.id)
                    this.list.splice(index, 1)
              } else {
                this.list.push(row)
              }
            },
            // 全选操作
            onTableSelectAll (arr) {
              if (!arr.length) { // 直接取消选中全部
                this.tableData.forEach((v) => {
                  const index = this.list.findIndex(i => 
                     i.id === v.id)
                  if (index !== -1) {
                    this.list.splice(index, 1)
                  }
                })
              } else { // 直接选中全部
                this.tableData.forEach((v) => {
                  const index = this.list.findIndex(i => 
                     i.id=== v.id)
                  if (index === -1) {
                    this.list.push(v)
                  }
                })
              }
            }
        }
    <script>
  • 相关阅读:
    MFC 将文件拖进对话框获得文件信息
    微软历史最高市值是多少?
    ZooKeeper的学习与应用
    OutputCache祥解
    本人的微博转移
    java list三种遍历方法性能比較
    VS2010旗舰版安装图解
    SSL协议具体解释
    freemarker字符串拼接
    [java web 入门](一)MyEclipse &amp; HelloWorld 记录
  • 原文地址:https://www.cnblogs.com/adbg/p/11899324.html
Copyright © 2020-2023  润新知