饿了么table多选弹框前端分页

运用selection-change方法的值和 保存选中的值过滤当前页的数据 再concat合并

<template>
  <FormDialog width="800px" title="选择供应商" :visible.sync="visible" :loading="loading" @onBeforeClose="onCancel" @onCancel="onCancel" @onConfirm="onConfirm">
    <template slot="dialogMain">
      <!-- 查询 -->
      <el-form ref="form" :model="form" label-width="0">
        <el-row class="row">
          <el-col :span="9">
            <el-form-item label="" prop="supplierNameLike">
              <el-input v-model="form['supplierNameLike']" placeholder="请输入供应商名称" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="9">
            <el-form-item label="" prop="supplierType">
              <el-select v-model="form['supplierType']" filterable clearable placeholder="请选择供应商类型">
                <el-option v-for="(item, index) in enumsData['ISS0022']" :key="item['value'] || index" :label="item['label']" :value="item['value']"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2"></el-col>
          <el-col :span="2">
            <!-- <el-button type="primary" size="mini" @click="onQuery" class="btn_1">查询</el-button> -->
          </el-col>
        </el-row>
      </el-form>

      <!-- 表格 -->
      <el-table ref="table" :data="list" v-loading="listLoading" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" :selectable="selectable"></el-table-column>
        <el-table-column prop="supCode" label="供应商编码" width="150" show-overflow-tooltip align="center"> </el-table-column>
        <el-table-column prop="supName" label="供应商名称" show-overflow-tooltip align="center"> </el-table-column>
        <el-table-column prop="status" label="供应商状态" width="105" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row['status'] | FilterName(enumsData['ISS0024']) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="supplierType" label="供应商类型" width="105" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row['supplierType'] | FilterName(enumsData['ISS0022']) }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页数据展示 -->
      <Pagination v-show="total > 0" :total="total" :page.sync="pageInfo.pageNum" :size.sync="pageInfo.pageSize" :pageSizes="[10, 20, 50, 100, 200]"></Pagination>

      <!-- 已选择 -->
      <div class="select_box" v-if="selectionList && selectionList.length !== 0">
        <p class="p1">已选择 :</p>
        <div class="box_cent">
          <div class="box_name" v-for="(item, index) in selectionList" :key="index">
            {{ item['supName'] }}
            <div class="error" @click="onDel(item, index)">
              <i class="el-icon-circle-close icon_"></i>
            </div>
          </div>
        </div>
      </div>
    </template>
  </FormDialog>
</template>

<script>
import { requestSystemSupPageToDemand, requestSystemSupListToDemand } from '@/api/demand'
import Pagination from '@/components/Pager'
import { mapState } from 'vuex'

export default {
  name: 'supplierDialog',

  components: {
    Pagination
  },

  props: {
    // 弹窗显示
    show: {
      //  type: Object,
      type: Boolean,
      default: undefined
    },
    // 枚举数据
    enumsData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // 已选择 供应商数据
    selectedList: {
      type: Array,
      default: undefined
    },
    // form 下标
    index: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      loading: undefined,

      form: {
        supplierNameLike: '', // 供应商名称
        supplierType: '' // 供应商状态
      },

      supplierList: [], // 供应商数据
      listLoading: undefined,
      pageInfo: { pageNum: 1, pageSize: 10 }, // 分页

      selectionList: [], // 多选数据
      disabledSeleection: undefined
    }
  },

  computed: {
    ...mapState({
      theme: (state) => state.settings.theme
    }),

    visible: {
      get() {
        // !!this.show
        return this.show
      },
      set(value) {
        if (!value) {
          this.$emit('update:show', undefined)
        }
      }
    },

    // 页码
    total() {
      return this.listFilter.length || 0
    },

    // list 查询过滤
    listFilter() {
      return this.supplierList.filter((item) => {
        return item['supName'].includes(this.form['supplierNameLike']) && item['supplierType'].includes(this.form['supplierType'])
      })
    },

    // 表格数据
    list() {
      return this.listFilter.slice((this.pageInfo['pageNum'] - 1) * this.pageInfo['pageSize'], this.pageInfo['pageNum'] * this.pageInfo['pageSize'])
    }
  },

  watch: {
    show: {
      handler(val) {
        if (val) {
          this.backSelect()
        }
      },
      deep: true
    },

    total() {
      this.pageInfo['pageNum'] = 1
    },

    list: {
      handler(newVal) {
        if (newVal && newVal.length && this.selectionList && this.selectionList.length) {
          this.disabledSeleection = true
          this.$nextTick(() => {
            newVal.forEach((obj) => {
              const has = this.selectionList.find((v) => {
                return obj['id'] === v['id']
              })
              this.$refs['table'].toggleRowSelection(obj, !!has)
            })
            this.disabledSeleection = false
          })
        }
      },
      immediate: true
    }
  },

  created() {
    this.queryList()
  },

  methods: {
    // 反选
    backSelect() {
      if (this.selectedList && this.selectedList.length !== 0) {
        this.$nextTick(() => {
          this.selectedList.forEach((item) => {
            this.$refs['table'].toggleRowSelection(item, true)
          })
        })
      }
    },

    // 禁用选择框
    selectable() {
      if (this.selectionList && this.selectionList.length >= 5) {
        return false
      }
      return true
    },

    // 查询供应商列表数据
    queryList() {
      this.listLoading = true
      requestSystemSupListToDemand(this.form)
        .then((res) => {
          this.supplierList = res['data'] || []
          this.listLoading = undefined

          if (this.selectionList && this.selectionList.length !== 0) {
            const ids = this.selectionList.map((v) => v['id'])
            this.$nextTick(() => {
              res['data'].forEach((item) => {
                ids.forEach((id) => {
                  if (id === item['id']) {
                    console.error('--- item ---', item)
                    this.$refs['table'].toggleRowSelection(item, true)
                  }
                })
              })
            })
          }
        })
        .catch((error) => {
          console.error(error, 'error')
          this.listLoading = undefined
        })
    },

    // 多选数据
    handleSelectionChange(e) {
      if (this.disabledSeleection) {
        return
      }
      if (e && e.length > 5) {
        this.$refs['table'].clearSelection()
        return this.$message.warning('最多选择五组供应商数据')
      }
      const listOher = this.selectionList.filter((v) => {
        return !this.list.find((o) => o['id'] === v['id'])
      })
      this.selectionList = listOher.concat(e)
    },

    // 删除
    onDel(item, index) {
      if (item) {
        this.$nextTick(() => {
          this.$refs['table'].toggleRowSelection(item, false)
        })
      } else {
        this.$nextTick(() => {
          this.$refs['table'].clearSelection()
        })
      }
      this.selectionList.splice(index, 1)
    },

    // 取消
    onCancel() {
      this.visible = false
    },

    // 确定
    onConfirm() {
      this.loading = true
      if (this.selectionList && this.selectionList.length === 0) {
        this.loading = false
        return this.$message.warning('请选择供应商数据')
      }
      this.$emit('onConfirm', this.selectionList, this.index)
      this.visible = false
      this.loading = false
      this.selectionList = []
    }
  }
}
</script>

<style scoped lang="scss">
.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.btn_1 {
  position: relative;
  top: 4px;
}
.select_box {
  width: 100%;
  display: flex;
  align-items: center;
  .p1 {
    font-size: 14px;
    color: #606266;
    font-weight: 600;
    width: 60px;
    text-shadow: 0px 0px #fff;
    margin-right: 7px;
  }
  .box_cent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .box_name {
      padding: 4px 12px 5px 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      margin: 2px 10px 0 0;
      background: #f4f4f4;
      font-weight: 400;
      font-size: 14px;
      color: #70747e;
      .error {
        font-size: 14px;
        margin-top: 4px;
        cursor: pointer;
        position: relative;
        left: 5px;
        top: -1px;
      }
      .icon_ {
        border-radius: 50%;
        background: #d8d8d8;
      }
    }
  }
}
</style>