element-ui table 多頁 單選數據回顯；多選數據回顯

單選：注意row-key、:reserve-selection="true"

<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" plain @click="open" size="medium">選擇商品</el-button>
    <el-dialog title="團購商品" :visible.sync="dialogVisible">
      <el-row class="d2-mt-20">
        <el-col :span="6">
          <el-button @click="getData">刷新</el-button>
        </el-col>
        <el-col :offset="12" :span="6" align="right">
          <el-input placeholder="請輸入商品名稱" v-model="searchValue" class="input-with-select">
            <el-button slot="append" @click="getData" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-table ref="spuOnlineTable" :data="tableData" stripe style="width: 100%" @select="handleSelectionChange" @select-all="handleSelectionChange" row-key="spuOnlineId">
          <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
          <el-table-column prop="date" label="商品名稱">
            <template slot-scope="scope">
              <div>
                <img v-if="scope.row.photoUrl" :src="scope.row.photoUrl" class="img">
                <span>{{scope.row.name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="spuNo" label="商品編碼"></el-table-column>
          <el-table-column prop="retailPrice" label="零售價" width="80"></el-table-column>
          <el-table-column label="訪問量" width="120">
            <template slot-scope="scope">
              <div>訪問量：{{scope.row.visitorNum}}</div>
              <div>瀏覽量：{{scope.row.viewNum}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="salesNum" label="總銷量" width="80"></el-table-column>
          <el-table-column prop="stockNum" label="可售庫存" width="80"></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>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">確 定</el-button>
      </span>
    </el-dialog>
    <div v-for="(item,index) in couponItem" :key="index" style="margin-top:10px;">
      <img v-if="item.photoUrl" :src="item.photoUrl" class="img">
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      pagination: {
        current: 1,
        size: 3,
        total: 0
      },
      dialogVisible: false,
      searchValue: '',
      tableData: [],
      storeDeptId: this.$store.getters.storeDeptId,
      couponItem: ''
    }
  },
  methods: {
    getData () {
      this.$http.post('/cl-mall-goods/goods/info/online/spus/web/search', {
        orderField: 'CREATE_TIME',
        pageAsc: false,
        searchContent: this.searchValue,
        pageCurrent: this.pagination.current,
        pageSize: this.pagination.size,
        salesStatus: 'ALL',
        searchField: 'SPU_NAME',
        storeDeptId: this.storeDeptId
      }).then(res => {
        this.tableData = res.data.records
        const table = this.$refs.spuOnlineTable
        let len = this.couponItem.length
        if (len > 0) {
          let item = this.couponItem[len - 1]
          this.tableData.forEach((row) => {
            if (row.spuOnlineId === item.spuOnlineId) {
              table.toggleRowSelection(row, true)
            }
          })
        }

        this.pagination.total = Number(res.data.total)
      })
    },
    handleCurrentChange (val) {
      this.pagination.current = val
      this.getData()
    },
    handleSelectionChange (list) {
      const table = this.$refs.spuOnlineTable
      let len = list.length
      if (len > 1) {
        list = _.last(list)
        table.clearSelection()
        table.toggleRowSelection(list, true)
        this.couponItem = [list]
      } else {
        this.couponItem = list
      }
    },
    handleSubmit () {
      this.dialogVisible = false
      this.$emit('getCouponItem', this.couponItem)
    },
    open () {
      this.dialogVisible = true
      this.getData()
    }
  },
  watch: {
    value: {
      handler (val) {
        this.$http.post('/cl-mall-goods/goods/info/online/spus/web/search', {
          orderField: 'CREATE_TIME',
          pageAsc: false,
          pageCurrent: 1,
          pageSize: 999,
          salesStatus: 'ALL',
          searchField: 'SPU_NAME',
          storeDeptId: this.storeDeptId
        }).then(res => {
          console.log(val)
          this.couponItem = res.data.records.filter(item => val.includes(item.spuOnlineId))
          this.$emit('getCouponItem', this.couponItem)
        })
      },
      immediate: true
    }
  },
  mounted () {

  }
}
</script>

<style  scoped>
.img {
  /* display: inline-block; */
  width: 80px;
  height: 80px;
  /* vertical-align: middle; */
  margin-right: 20px;
  float: left;
}
</style>

多選：

<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible=true">選擇商品</el-button>
    <el-dialog title="活動商品" :visible.sync="dialogVisible" @open="getData">
      <el-row class="d2-mt-20">
        <el-col :span="6">
          <el-button @click="getData">刷新</el-button>
        </el-col>
        <el-col :offset="12" :span="6" align="right">
          <el-input placeholder="請輸入商品名稱" v-model="searchValue" class="input-with-select">
            <el-button slot="append" @click="getData" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-table ref="spuOnlineTable" :data="tableData" stripe style="width: 100%" @select="handleSelectionChange" @select-all="handleSelectionChange" :row-key="getRowKey">
          <el-table-column type="selection" width="55" :reserve-selection="true">
          </el-table-column>
          <el-table-column prop="date" label="商品名稱">
            <template slot-scope="scope">
              <div>
                <img v-if="scope.row.photoUrl" :src="scope.row.photoUrl" class="img">
                <span>{{scope.row.name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="spuNo" label="商品編碼"></el-table-column>
          <el-table-column prop="retailPrice" label="零售價" width="80"></el-table-column>
          <el-table-column label="訪問量" width="120">
            <template slot-scope="scope">
              <div>訪問量：{{scope.row.visitorNum}}</div>
              <div>瀏覽量：{{scope.row.viewNum}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="salesNum" label="總銷量" width="80"></el-table-column>
          <el-table-column prop="stockNum" label="可售庫存" width="80"></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>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">確 定</el-button>
      </span>
    </el-dialog>
    <div v-for="(item,index) in couponItem" :key="index" class="d2-mt-10">
      <img v-if="item.photoUrl" :src="item.photoUrl" class="img">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      pagination: {
        current: 1,
        size: 3,
        total: 0
      },
      dialogVisible: false,
      searchValue: '',
      tableData: [],
      selectList: [],
      activeStoreDeptId: this.$store.getters.storeDeptId,
      couponItem: ''
    }
  },
  methods: {
    getRowKey (row) {
      return row.spuOnlineId
    },
    getData () {
      this.$http.post('/cl-mall-goods/goods/info/online/spus/web/search', {
        orderField: 'CREATE_TIME',
        pageAsc: false,
        searchContent: this.searchValue,
        pageCurrent: this.pagination.current,
        pageSize: this.pagination.size,
        salesStatus: 'ALL',
        searchField: 'SPU_NAME',
        storeDeptId: this.activeStoreDeptId
      }).then(res => {
        this.tableData = res.data.records
        this.pagination.total = Number(res.data.total)
      })
    },
    handleCurrentChange (val) {
      this.pagination.current = val
      this.getData()
    },
    handleSelectionChange (val) {
      console.log('val', val)
      this.selectList = val
    },
    handleSubmit () {
      this.dialogVisible = false
      this.couponItem = this.selectList
      this.$emit('getCouponItem', this.unique(this.selectList))
    },
    // 數組去重
    unique (arr) {
      let newArr = []
      arr.forEach((item, index, array) => {
        var flag = true
        newArr.forEach(newItem => {
          if (item.spuOnlineId === newItem.spuOnlineId) {
            flag = false
            return flag
          }
        })
        if (flag) {
          newArr.push(item)
        }
      })
      return newArr
    }
  },
  watch: {
  },
  mounted () {
    this.getData()
  }
}
</script>

<style  scoped>
.img {
  width: 80px;
  height: 80px;
  margin-right: 20px;
  float: left;
}
</style>