vue2 el-table多选

<template>
  <div>
    <div style="float: right">
      <el-button type="primary" plain @click="quantityFunctionFn">批量</el-button>
    </div>
    <div>
      <el-table
        highlight-current-row
        :data="tableData"
        style="width: 100%"
        border
        ref="multipleTable"
        @selection-change="selectItemFunctionFn"
        :max-height="maxHeight"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="name" label="名字"> </el-table-column>
        <el-table-column prop="gender" label="性别"> </el-table-column>
        <el-table-column prop="representative" label="代表">
          <template slot-scope="scope">
            <div v-if="scope.row.representative !== null" style="cursor: pointer">
              <el-tooltip
                v-if="scope.row.representative.length > 15"
                :content="scope.row.representative || ''"
                placement="top"
                effect="light"
              >
                <span>{{ scope.row.representative.substring(0, 15) + '...' }}</span>
              </el-tooltip>
              <span v-else>{{ scope.row.representative }} </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="AssociatedBatchFunctionFn(scope.row)">关联批量</el-button>
            <el-button @click="deleteFunctionFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-wrapper">
      <el-pagination
        :current-page.sync="query.pageNum"
        :page-sizes="[10, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
let falselist = {
  data: {
    pageNum: 1,
    pageSize: 10,
    list: [
      {
        name: '杨紫',
        gender: '女',
        id: 1,
        representative: '哈哈哈哈达和佛教的护法觉得十分激动撒',
      },
      {
        name: '杨幂',
        gender: '女',
        id: 134,
        representative: '哈哈哈哈达和佛教的护法觉得十分激动撒',
      },
      {
        name: '赵丽颖',
        gender: '女',
        id: 1323,
        representative: '哈哈哈哈达和佛教的护法觉得十分激动撒',
      },
      {
        name: '白鹿',
        gender: '女',
        id: 1333,
        representative: '哈哈哈哈达和佛教的护法觉得十分激动撒',
      },
      {
        name: '王子文',
        gender: '女',
        id: 1444,
        representative: '哈哈哈哈达和佛教的护法觉得十分激动撒',
      },
      {
        name: '张一山',
        gender: '难',
        id: 15555,
        representative: '哈哈哈哈达和佛教的护法觉得十分激动撒',
      },
    ],
  },
}
export default {
  data() {
    return {
      tableData: [],
      maxHeight: 0,
      query: {
        pageNum: 1, // 当前页
        pageSize: 10, // 一页多少条
      },
      total: 0,
      ida: [], //取id
      single: true, // 非单个禁用
      multiple: true,
    }
  },
  created() {
    this.aspectFunctionFn()
  },
  mounted() {
    this.$nextTick(() => {
      this.maxHeight = window.innerHeight - 100
    })
  },
  methods: {
    aspectFunctionFn() {
      // 写接口
      this.tableData = falselist.data.list
      this.total = falselist.data.total
    },
    // 勾选全选
    onSelectAllFn() {
      this.$refs.multipleTable.clearSelection() //清除表格所有的选中项
    },
    // 批量
    quantityFunctionFn() {
      if (this.ida.length >= 1) {
        // 写逻辑
      } else {
        this.$message.warning('请先勾选')
      }
    },
    // 多选
    selectItemFunctionFn(selection) {
      this.ida = selection.map(item => item.userId) // 需要根据数据情况调整id名称
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 删除
    deleteFunctionFn() {
      // 写逻辑
    },
    // 关联批量
    AssociatedBatchFunctionFn() {
      // 写逻辑
    },
    handleSizeChange(newSize) {
      this.query.pageSize = newSize
      this.aspectFunctionFn()
    },
    handleCurrentChange(newPage) {
      this.query.pageNum = newPage
      this.aspectFunctionFn()
    },
  },
}
</script>
<style lang="scss" scoped>
.pagination-wrapper {
  margin-top: 10px;
  float: right;
}
</style>