image.png

翻頁后選擇

image.png

再返回第一頁

image.png

查詢后仍然記憶所選

image.png

組件代碼

<template>
  <div>
    <searchBox>
      <el-form :model="queryForm" label-width="80px">
        <el-row :gutter="5">
          <el-col :span="8">
            <el-form-item label="廚道名稱">
              <el-input v-model="queryForm.kitchenName" @keyup.enter.native="query(1)" placeholder="請輸入" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="廚道編號">
              <el-input v-model="queryForm.kitchenCode" @keyup.enter.native="query(1)" placeholder="請輸入" size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button-group slot="button">
        <el-button type="primary" size="medium" icon="el-icon-search" @click="query(1)">查詢</el-button>
        <el-button type="" size="medium" icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-button-group>
    </searchBox>
    <!-- 廚道列表 -->
    <el-table @select="select" @select-all="selectAll" :max-height="maxheight" border ref="dataTable" v-loading="tableLoading" :element-loading-text="loadingText" :data="tableData" style="width: 100%" size="mini">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="廚道名稱" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.kitchenName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="廚道編號" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.kitchenCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="當前狀態(tài)" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.kitchenStatus | kitchenStatus}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-pag">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[20, 50, 100]" :page-size="queryForm.size" layout="total, sizes, ->, prev, pager, next" :total="total">
      </el-pagination>
      <!--prev-text="上一頁" next-text="下一頁" -->
    </div>
  </div>
</template>
<script>
import kitchenApi from '@/API/item/kitchen'
export default {
  props: {
    taskData: Object,
    /*
      *從父組件傳過來的值，最后也在父組件進行最后提交, 是這個樣子：{ kitchen: [] }
      */
    brandCode: String
  },
  data() {
    return {
      queryForm: {
        page: 0,
        size: 20
      },
      total: 0,
      page: 1,
      tableData: [],
      selectedRow: [],
      tableLoading: false,
      loadingText: '數(shù)據(jù)正在加載中請稍后...',
      maxheight: document.documentElement.clientHeight - 240
    }
  },
  created() {
    this.query(1)
  },
  methods: {
    // 查詢廚道
    query(page) {
      this.tableLoading = true
      this.queryForm.page = page - 1
      this.queryForm.brandCode = this.brandCode
      kitchenApi
        .query(this.queryForm)
        .then(res => {
          this.tableData = res.content
          if (this.taskData.kitchen.length) {
            this.toggleSelection(this.taskData.kitchen)
          }
          this.tableLoading = false
          this.total = res.totalElements
        })
        .catch(err => {
          console.log(err)
          this.tableLoading = false
        })
    },
    // 選中table已有數(shù)據(jù)
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$nextTick(() => {
            var checked = this.tableData.find(
              tableRow => tableRow.kitchenCode === row.kitchenCode
            )
            this.$refs.dataTable.toggleRowSelection(checked)
          })
        })
      } else {
        this.$refs.dataTable.clearSelection()
      }
    },
    // 表格單選事件
    select(selection, row) {
      /* 此處有一個神奇的bug，
       * 因為翻頁點選后selection會出現(xiàn)為undefined的元素，
       * 我對他進行了篩除，
       * 但愿日后有人見到這段代碼可以給出更為優(yōu)秀的解決方式
       */
      let allRows = selection.filter(item => !!item)
      // 根據(jù)表格單選事件確定取消是取消了哪一行
      if (allRows.find(item => item.kitchenCode === row.kitchenCode)) {
        // 選中新增一行
        this.addRows([row])
      } else {
        // 取消刪除一行
        this.removeRows([row])
      }
      console.log(this.taskData.kitchen)
    },
    // 表格全選事件
    selectAll(selection) {
      // 如果有則是全選否則就是全取消
      alert(selection.length > 1)
      if (selection.length > 1) {
        this.addRows(this.tableData)
      } else {
        this.removeRows(this.tableData)
      }
      console.log(this.taskData.kitchen)
    },
    // 添加選中行
    addRows(rows) {
      for (let key of rows) {
        // 如果選中的數(shù)據(jù)中沒有這條就添加進去
        if (
          !this.taskData.kitchen.find(
            item => item.kitchenCode === key.kitchenCode
          )
        ) {
          this.taskData.kitchen.push(key)
        }
      }
    },
    // 取消選中行
    removeRows(rows) {
      if (this.taskData.kitchen.length > 0) {
        for (let row of rows) {
          this.taskData.kitchen = this.taskData.kitchen.filter(item => item.kitchenCode !== row.kitchenCode)
        }
      }
    },
    // 選擇單頁展示多少條
    handleSizeChange(val) {
      this.queryForm.size = val
      this.tableLoading = true
      this.query(this.page)
    },
    // 選擇展示第幾頁
    handleCurrentChange(val) {
      this.page = val
      this.tableLoading = true
      this.query(val)
    },
    // 重置
    reset() {
      this.queryForm.page = 1
      this.queryForm.size = 20
      this.queryForm.kitchenName = null
      this.queryForm.kitchenCode = null
      this.taskData.kitchen = []
      this.query(1)
    }
  }
}
</script>