el-table支持分页多选

<template>
  <div>
    <el-dialog
      :title="`包含素材类型`"
      :visible.sync="visible"
      width="60%"
      center
      append-to-body
      :before-close="handleClose"
    >
      <div
        class="box"
        v-loading="tableLoading"
      >

        <!-- 内容区域 -->
        <div class="contend">
          <el-table
            :data="tableData"
            ref="multipleTable"
            stripe
            border
            style="width: 100%"
            @select="handleSelectionChange"
            @select-all="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            >
            </el-table-column>
            <el-table-column
              prop="id"
              label="id"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              align="center"
              min-width="250"
            >
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <Pagination
          v-if="tableData.length > 0"
          :total.sync="pagination.total"
          :page.sync="pagination.page"
          :page_size.sync="pagination.page_size"
          @paginationChange="paginationChange"
        ></Pagination>
      </div>
      <div class="flex mt40">
        <el-button
          size="mini"
          type="primary"
          style="marginRight: 100px"
          @click="submit('ruleForm')"
        >确 定</el-button>
        <el-button
          size="mini"
          @click="handleClose"
        >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
     getPaletteTypeList } from '@/api/product.js'
import _ from 'lodash'
import Pagination from '@/components/pagination/index.vue'




export default {
    
  data () {
    
    return {
    
      tableLoading: false,
      tableData: [],

      // 分页器
      pagination: {
    
        total: 300,
        page: 1,
        page_size: 10
      },
      // 批量移除
      aboutBatchDele: {
    
        deleArr: [],
        singlePage: []
      }
    }
  },
  watch: {
    
    visible () {
    
      if (this.visible) {
    
        this.pagination.page = 1
        this.pagination.page_size = 10
        this.getData({
     page: this.pagination.page, page_size: this.pagination.page_size })
        this.aboutBatchDele.deleArr = this.propData
      }

    }
  },
  props: {
    
    visible: {
    
      type: Boolean
    },
    propData: {
    
      type: Array
    },
  },

  methods: {
    
    // 原始获取数据
    async getData (obj) {
    
      let results = await getPaletteTypeList({
     ...obj })
      console.log(results)
      if (results.data.code === 200 && results.data.msg === 'OK') {
    
        this.tableData = _.cloneDeep(results.data.data)
        this.managesinglePageForDele(_.cloneDeep(results.data.data))
        this.pagination.total = results.data.page.total
      }
    },
    // 分页获取数据
    paginationChange (page, pageSize) {
    
      this.getData({
    
        page,
        page_size: pageSize
      })
    },
    // 多选修改
    handleSelectionChange (val) {
    
      // this.aboutBatchDele.singlePage = val.map(item => item.id)
      // 整理当前页是删除的id
      let valItem = val.map(item => {
    
        return item.id
      })
      // 修改当前页是删除功能的
      this.aboutBatchDele.singlePage.forEach(item => {
    
        if (valItem.includes(item.id)) {
    
          item.isDele = true
          this.manageDeleArr(item.id, true)
        } else {
    
          item.isDele = false
          this.manageDeleArr(item.id, false)
        }
      })
      console.log(this.aboutBatchDele.deleArr);
    },
    manageDeleArr (id, status) {
    
      let valItem = this.aboutBatchDele.deleArr
      if (status) {
    
        // 入移除部分
        if (!valItem.includes(id)) {
    
          this.aboutBatchDele.deleArr.push(id)
        }
      } else {
    
        // 不需要移除部分
        this.aboutBatchDele.deleArr = valItem.filter(item => {
    
          if (item !== id) return true
        })
      }

    },
    managesinglePageForDele (Arr) {
    
      this.aboutBatchDele.singlePage = Arr
      console.log(this.aboutBatchDele.deleArr);
      this.aboutBatchDele.singlePage.forEach(item => {
    
        if (this.aboutBatchDele.deleArr.includes(item.id)) {
    
          item.isDele = false
        } else {
    
          item.isDele = true
        }
      })

      // 更新页面
      this.$nextTick(() => {
    
        let valItem = this.aboutBatchDele.deleArr

        this.tableData.forEach(item => {
    
          if (valItem.includes(item.id)) {
    
            this.$refs.multipleTable.toggleRowSelection(item);
          }
        })
      })

    },
    // 关闭
    handleClose () {
    
      this.$emit('change', false)
      this.$emit('update:visible', false)
    },
    submit () {
    
      console.log(this.aboutBatchDele.deleArr);
      this.$emit('change', this.aboutBatchDele.deleArr)
      this.$emit('update:visible', false)

    },
  },
  components: {
    
    Pagination
  }
}
</script>

<style scoped lang="less">
.box {
    
  padding: 15px 15px;
}
.topSearch {
    
  background-color: #fff;
  border-radius: 10px;
}
</style>