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>
  • 相关阅读:
    webstorm快捷键大全
    Js的reduce()方法
    利用 c# linq 实现多个数据库的联合查询
    微信小程序支付接入注意点
    ubuntu所有php扩展php-7.0扩展列表
    ubuntu 16.04 php 安装curl方法
    Ubuntu下配置Apache开启HTTPS
    Mac下如何用SSH连接远程Linux服务器及Linux一些常用操作命令,更新中.....
    Mac下如何用SSH连接远程Linux服务器
    C#的dapper使用
  • 原文地址:https://www.cnblogs.com/adbg/p/11899324.html
Copyright © 2011-2022 走看看