vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > el-table弹窗使用

el-table在弹窗中的使用示例详解

作者：道香居

本文总结了在Vue2项目中使用element-ui的el-table组件在弹窗中展示数据,并实现基础的勾选功能,内容包括如何设置row-key、使用reserve-selection属性、修改数据获取函数以支持跨页勾选以及如何在关闭弹窗时清理selection,感兴趣的朋友跟随小编一起看看吧

el-table在弹窗中的使用

概要

在实际的业务场景中，需要在弹窗内增加表格的展示，勾选.本文以我实际的开发过程中，碰到的"坑",来总结一下el-table 如何设置

使用Vue2版本来开发 element-ui

如何展示基本的图表数据,并支持基础的勾选

数据的展示包含多个页面
参考官方的代码

<template>
  <div class="main">
  <!-- 授权设备 -->
  <el-dialog title="选择设备" :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 {
        // 设备设置界面打开
        deviceOpen: false,
        devicesTotal: 0,
        deviceQueryParams: {
          pageIndex: 1,
          pageSize: 10
          deviceType: undefined
        },
        iotDeviceList: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    methods: {
      // 提交设备设置
      submitDevicesForm(){
        var form = {...}
        updateIoDevice(form).then(response => {
          if(response.code === 200){
            // 上方会显示成功的消息通知
            this.msgSuccess(response.msg)
            this.deviceOpen = false
            this.deviceLoading = false
            // 此处相当于弹窗取消之后，重新刷新页面数据
            this.getList()
          }else {
            this.msgError(response.msg)
          }
        })
      },
      // 取消设备设置
      cancelDevicesSet(){
        this.deviceLoading = false
        this.deviceOpen = false
      },
      // 勾选改变时触发的事件
      handleSelectionChange(selection) {
        // 每次触发打印selection信息，总是发现出现数组中包含多个toggle数据，所以便再此设置了过滤，如果有同学知道为什么，可以评论区留言
        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>

以上代码只实现了基本的单页面勾选功能，未实现真正意义上的多页面勾选，页面切换。想要实现，请看一下介绍

如何支持跨页依然能保留记录的功能

...
this.iotDeviceList = response.data.list
this.devicesTotal = response.data.count
// 执行回显操作
this.$nextTick(() => {
    let selectItem = []
    this.iotDeviceList.forEach(item =>{
        if (this.devicesIds){
            this.devicesIds.forEach(id => {
                if (item.id === id){
                    selectItem.push(item)
                }
            })
        }
    })
    // 触发勾选项
    this.$refs.multipleTable.toggleRowSelection(selectItem)
})

增加getRowKeys，保证每一个行的数据是唯一

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

注意，在关闭dialog之后，点击确定，点击取消的时候，需要清理一下selection
如果不清理，目前观察toggle数据会不断增长
this.$refs.multipleTable.clearSelection()

如何实现从后端记录的勾选在前端显示

基本思路是这样: 从后端获取之前勾选的device ID之后, 在每次页面获取数据后，触发勾选，但是如果勾选成功后，记录要删除，否则用户点击取消以前的数据，则是无效的

this.$nextTick(() => {
  ....
})
// 承接上面的代码，下面是实际读取后端数据触发toggle的操作
this.$nextTick(() => {
      // let selectItem = []
      let remove_ids = []
      this.iotDeviceList.forEach(item =>{
          // 记录从数据库获取的数据, beforeDevicesIds是之前勾选的设备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{
          // 过滤已经处理devices ID
          this.beforeDevicesIds = this.beforeDevicesIds.filter(id =>!remove_ids.includes(id))
      }
  }) // 因为页面渲染的异步，所以加一个延迟刷新数据
  this.deviceLoading = false

知识点

Vue有个异步更新策略，就是如果数据变化，vue不会立刻更新DOM，而是开启一个队列，把组件更新函数保存到队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。如果想获取更新后的DOM状态，需要使用nextTick

使用场景：

到此这篇关于el-table在弹窗中的使用的文章就介绍到这了,更多相关el-table弹窗使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文