El table supports paging multiple selection

<template>
  <div>
    <el-dialog
      :title="` Include material type `"
      :visible.sync="visible"
      width="60%"
      center
      append-to-body
      :before-close="handleClose"
    >
      <div
        class="box"
        v-loading="tableLoading"
      >

        <!--  Content area  -->
        <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=" name "
              align="center"
              min-width="250"
            >
            </el-table-column>
          </el-table>
        </div>
        <!--  Pagination  -->
        <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')"
        > indeed   set </el-button>
        <el-button
          size="mini"
          @click="handleClose"
        > take   eliminate </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: [],

      //  Pager 
      pagination: {
    
        total: 300,
        page: 1,
        page_size: 10
      },
      //  Remove in bulk 
      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: {
    
    //  Raw acquisition data 
    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
      }
    },
    //  Paging data 
    paginationChange (page, pageSize) {
    
      this.getData({
    
        page,
        page_size: pageSize
      })
    },
    //  Multiple selection modification 
    handleSelectionChange (val) {
    
      // this.aboutBatchDele.singlePage = val.map(item => item.id)
      //  Sorting the current page is deleted id
      let valItem = val.map(item => {
    
        return item.id
      })
      //  Modifying the current page is to delete the function 
      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) {
    
        //  Enter and remove the part 
        if (!valItem.includes(id)) {
    
          this.aboutBatchDele.deleArr.push(id)
        }
      } else {
    
        //  There is no need to remove some 
        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
        }
      })

      //  Update page 
      this.$nextTick(() => {
    
        let valItem = this.aboutBatchDele.deleArr

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

    },
    //  close 
    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>