Element-UI el-table 多選，多選數據刪除後數據回顯

詳情圖：選擇藥品-》刪除已選擇藥品

<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible=true">選擇藥品</el-button>
    <el-dialog title="選擇藥品" :visible.sync="dialogVisible" @open="getData" width="80%">
      <el-input :placeholder="placeholder" v-model="searchValue" class="width-200">
        <el-button slot="append" @click="getData" icon="el-icon-search"></el-button>
      </el-input>
      <el-table ref="spuOnlineTable" :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="calSelectable">
        </el-table-column>
        <el-table-column :prop="item.key" :label="item.label" v-for='(item,index) in columns' :key='index'>
        </el-table-column>
      </el-table>
      <el-pagination align="right" :current-page="pagination.current" :page-size="pagination.size" :total="pagination.total" layout="total, prev, pager, next" @current-change="handleCurrentChange">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">確 定</el-button>
      </span>
    </el-dialog>
    <el-table v-show="showList.length!==0" :data="showList.slice((showListPagination.current-1)*showListPagination.size,showListPagination.current*showListPagination.size)" stripe style="width: 100%">
      <el-table-column prop="consultId" label="藥品編號">
      </el-table-column>
      <el-table-column prop="patientInfo.realName" label="藥品名稱">
      </el-table-column>
      <el-table-column prop="status" label="規格">
      </el-table-column>
      <el-table-column prop="patientUserId" label="產地">
      </el-table-column>
      <el-table-column label="排序" width="100">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort" size="small"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="removeShowList(scope.$index)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="showList.length!==0" align="right" :current-page="showListPagination.current" :page-size="showListPagination.size" :total="showList.length" layout="total, prev, pager, next" @current-change="handleShowListCurrentChange"></el-pagination>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      columns: [
        {
          label: '藥品編號',
          key: 'patientInfo.realName'
        }, {
          label: '藥品',
          key: 'patientInfo.username'
        }, {
          label: '規格',
          key: 'doctorInfo.realName'
        }, {
          label: '產地',
          key: 'doctorInfo.username'
        }, {
          label: '一級分類',
          key: 'createTime'
          // width: 140
        }, {
          label: '二級分類',
          key: 'set'
        }, {
          label: '三級分類',
          key: 'detail'
        }, {
          label: '四級分類',
          key: 'detail'
        }, {
          label: '狀態',
          key: 'detail'
        }],
      placeholder: '請輸入藥品編號/藥名',
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      showListPagination: {
        current: 1,
        size: 3,
        total: 0
      },
      oldSelected: {
        loadFlag: false,
        oldSelectedIdList: [],
        oldSelectedSpuList: []
      },
      dialogVisible: false,
      searchValue: '',
      tableData: [],
      selectList: [],
      showList: [],
      showIdList: []
    }
  },
  computed: {
    ...mapState(['appId', 'tenantDeptId'])
  },
  methods: {
    getData (searchObj) {
      this.loading = true
      let initdata = {
        status: 'ALL',
        tenantDeptId: this.tenantDeptId,
        pageAsc: false,
        pageCurrent: this.pagination.current,
        pageSearchCount: true,
        pageSize: this.pagination.size,
        type: 'APP_PRES_FAST_VISIT'
      }
      if (searchObj) {
        this.data = Object.assign({}, initdata, searchObj)
      } else {
        this.data = { ...initdata }
      }
      this.$http.post('/cl-hospital-pres/pres/consults/manager/search', this.data).then(res => {
        this.pagination.total = Number(res.data.total)
        if (res.data.records) {
          this.tableData = res.data.records.map(it => {
            it.presPayOrderId = it.presPayOrderId ? it.presPayOrderId : '無'
            return it
          })
        } else {
          this.tableData = []
        }
        this.loading = false
      })
    },
    handleShowListCurrentChange (val) {
      this.showListPagination.current = val
    },
    calSelectable (row, index) {
      if (this.showIdList.includes(row.consultId)) {
        return false
      } else {
        return true
      }
    },
    removeShowList (index) {
      var targetIndex = index + (this.showListPagination.size * (this.showListPagination.current - 1))
      // if (index === 0) {
      //   this.showListPagination.current = this.showListPagination.current - 1
      // }
      // if (this.showList.length > 1) {
      this.showList.splice(targetIndex, 1)
      this.showIdList.splice(targetIndex, 1)
      // }
    },
    handleCurrentChange (val) {
      this.pagination.current = val
      this.getData()
    },
    handleSelectionChange (val) {
      // this.selectList 每個頁面是一個數組
      this.selectList[this.pagination.current] = val
    },
    handleSubmit () {
      this.showList = []
      // 將不同頁面的選中的數組連接起來
      this.selectList.forEach(item => {
        this.showList = this.showList.concat(item)
      })
      this.showIdList = this.showList.map(it => it.consultId)
      this.dialogVisible = false
    },
    handleOpened () {
      var showIdList = this.showList.map(item => item.consultId)
      if (this.$refs.spuOnlineTable !== undefined) {
        this.tableData.forEach(item => {
          if (showIdList.includes(item.consultId)) {
            this.$refs.spuOnlineTable.toggleRowSelection(item, true)
          } else {
            this.$refs.spuOnlineTable.toggleRowSelection(item, false)
          }
        })
      }
    }
  },
  watch: {
    tableData (n, o) {
      this.$nextTick(() => {
        this.handleOpened()
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style  scoped>
</style>