zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Leetcode100.相同的树
    Leetcode53. 最大子序列和
    Leetcode35. 搜索插入位置
    Leetcode27.移除元素
    Leetcode 26. 删除排序数组中的重复项
    Leetcode. 1290 二进制链表转整数
    Leetcode.234 回文链表
    Leetcode206.反转链表
    课本 求素数
    循环法求素数 1306 循环求素数10.1.5.253 ====== 1313 筛选法求素数10.1.5.253
  • 原文地址:https://www.cnblogs.com/adbg/p/11899324.html
Copyright © 2011-2022 走看看