快捷導(dǎo)航

el-table在彈窗中的使用示例詳解

更新時間：2024年12月03日 09:22:38 作者：道香居

本文總結(jié)了在Vue2項目中使用element-ui的el-table組件在彈窗中展示數(shù)據(jù),并實現(xiàn)基礎(chǔ)的勾選功能,內(nèi)容包括如何設(shè)置row-key、使用reserve-selection屬性、修改數(shù)據(jù)獲取函數(shù)以支持跨頁勾選以及如何在關(guān)閉彈窗時清理selection,感興趣的朋友跟隨小編一起看看吧

el-table在彈窗中的使用

概要

在實際的業(yè)務(wù)場景中，需要在彈窗內(nèi)增加表格的展示，勾選.本文以我實際的開發(fā)過程中，碰到的"坑",來總結(jié)一下el-table 如何設(shè)置

使用Vue2版本來開發(fā) element-ui

如何展示基本的圖表數(shù)據(jù),并支持基礎(chǔ)的勾選

數(shù)據(jù)的展示包含多個頁面
參考官方的代碼

<template>
  <div class="main">
  <!-- 授權(quán)設(shè)備 -->
  <el-dialog title="選擇設(shè)備" :visible.sync="deviceOpen" width="500px">
  <el-table
    ref="multipleTable"
    :data="iotDeviceList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <pagination
      v-show="devicesTotal>0"
      :total="devicesTotal"
      :page.sync="deviceQueryParams.pageIndex"
      :limit.sync="deviceQueryParams.pageSize"
      @pagination="getDevicesList"
  />
  <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitDevicesForm">確 定</el-button>
      <el-button @click="cancelDevicesSet">取 消</el-button>
  </div>
  </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 設(shè)備設(shè)置界面打開
        deviceOpen: false,
        devicesTotal: 0,
        deviceQueryParams: {
          pageIndex: 1,
          pageSize: 10
          deviceType: undefined
        },
        iotDeviceList: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    methods: {
      // 提交設(shè)備設(shè)置
      submitDevicesForm(){
        var form = {...}
        updateIoDevice(form).then(response => {
          if(response.code === 200){
            // 上方會顯示成功的消息通知
            this.msgSuccess(response.msg)
            this.deviceOpen = false
            this.deviceLoading = false
            // 此處相當于彈窗取消之后，重新刷新頁面數(shù)據(jù)
            this.getList()
          }else {
            this.msgError(response.msg)
          }
        })
      },
      // 取消設(shè)備設(shè)置
      cancelDevicesSet(){
        this.deviceLoading = false
        this.deviceOpen = false
      },
      // 勾選改變時觸發(fā)的事件
      handleSelectionChange(selection) {
        // 每次觸發(fā)打印selection信息，總是發(fā)現(xiàn)出現(xiàn)數(shù)組中包含多個toggle數(shù)據(jù)，所以便再此設(shè)置了過濾，如果有同學知道為什么，可以評論區(qū)留言
        this.multipleSelection = selection.filter((item) => Array.isArray(item) === false).map(obj => obj.id);
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      // 分頁查詢請求
      getDevicesList(){
        this.deviceLoading = true
        listIotDevice(this.deviceQueryParams).then(response => {
            this.iotDeviceList = response.data.lise
            this.deviceTotal = response.data.count
        })
      }
    }
  }
</script>

以上代碼只實現(xiàn)了基本的單頁面勾選功能，未實現(xiàn)真正意義上的多頁面勾選，頁面切換。想要實現(xiàn)，請看一下介紹

如何支持跨頁依然能保留記錄的功能

el-table 添加row-key
<el-table v-loading="deviceLoading" ref="multipleTable" :row-key="getRowKeys"
el-table-column 添加reserve-selection
<el-table-column type="selection" :reserve-selection="true" width="55" align="center"/>
修改getDevicesList函數(shù),保證在切換Page的時候，自動勾選之前的選項

...
this.iotDeviceList = response.data.list
this.devicesTotal = response.data.count
// 執(zhí)行回顯操作
this.$nextTick(() => {
    let selectItem = []
    this.iotDeviceList.forEach(item =>{
        if (this.devicesIds){
            this.devicesIds.forEach(id => {
                if (item.id === id){
                    selectItem.push(item)
                }
            })
        }
    })
    // 觸發(fā)勾選項
    this.$refs.multipleTable.toggleRowSelection(selectItem)
})

增加getRowKeys，保證每一個行的數(shù)據(jù)是唯一

methods: {
   getRowKeys(row){
       return row.id
   }
}

注意，在關(guān)閉dialog之后，點擊確定，點擊取消的時候，需要清理一下selection
如果不清理，目前觀察toggle數(shù)據(jù)會不斷增長
this.$refs.multipleTable.clearSelection()

如何實現(xiàn)從后端記錄的勾選在前端顯示

基本思路是這樣: 從后端獲取之前勾選的device ID之后, 在每次頁面獲取數(shù)據(jù)后，觸發(fā)勾選，但是如果勾選成功后，記錄要刪除，否則用戶點擊取消以前的數(shù)據(jù)，則是無效的

this.$nextTick(() => {
  ....
})
// 承接上面的代碼，下面是實際讀取后端數(shù)據(jù)觸發(fā)toggle的操作
this.$nextTick(() => {
      // let selectItem = []
      let remove_ids = []
      this.iotDeviceList.forEach(item =>{
          // 記錄從數(shù)據(jù)庫獲取的數(shù)據(jù), beforeDevicesIds是之前勾選的設(shè)備id列表
          if (this.beforeDevicesIds){
              this.beforeDevicesIds.forEach(id => {
              if (item.id === id){
                      remove_ids.push(id)
                      this.$refs.multipleTable.toggleRowSelection(item)
                  }
              })
          }
      })
      if (remove_ids.length === 0){
      }else{
          // 過濾已經(jīng)處理devices ID
          this.beforeDevicesIds = this.beforeDevicesIds.filter(id =>!remove_ids.includes(id))
      }
  }) // 因為頁面渲染的異步，所以加一個延遲刷新數(shù)據(jù)
  this.deviceLoading = false