el-table动态渲染看我这一篇就行。

代码钢琴家
794 阅读4分钟

相信各位小伙伴在项目开发中在项目开发中大量运用到过表格的数据，例如我们实现一个最简单的，el-table。

image.png

项目开发中远不止如此，还会有更多的表格数据，例如需要你动态去渲染，这个时候你会怎么办呢？看完我这篇文章后，相信一定不在话下啦。

  1. 首先我们知道第一点，我们从后端接受的数据里面，el-table 中绑定的 :data='table'这个值是一定不会改变的，因为它这个值里面存储着你整个表格中的数据信息。

  2. 我们需要改变的应该是 el-table-column 中的值，你需要的是动态响应这各部分的值，需要哪些数据，你就动态渲，所以我们对 el-table-column用 v-for动态循环即可。

image.png 3. 其实做完这个部分的代码大致基本完成了数据的动态响应只是说，因为考虑到表头是动态添加的，一般的项目中我们应该是这样。复选框 + 表格的形式，对于要展示的数据表头，动态添加。同时存在基本默认展示项。例如：

image.png

我们可以理解为姓名、地址是我们项目中的默认展示项，通过勾选的方式来动态添加表头。

image.png

4.可以发现我们的其余四项是被勾选上之后在表头中展示出来的。

代码讲解部分：

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.name" :key="city.name">{{city.name}}</el-checkbox>
    </el-checkbox-group>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
   
      <el-table-column v-for="(item,index) in checkedCities" :key="index" :label="item" 
      :prop="changeTem(item)">
      </el-table-column>
    </el-table>
  </div>
</template>

export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          status:'1',
          age:'15',
          sex:'男'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          status:'2',
          age:'15',
          sex:'男'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          status:'3',
          age:'15',
          sex:'男'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          status:'4',
          age:'15',
          sex:'男'
        }],

        keyArr:[],
        flag:false,

        checkAll: false,
        checkedCities: ['姓名','地址'],
        cities: cityOptions,
        isIndeterminate: true
      }
    },

checkedCities： 就是默认的展示数组项，

tableData：就是后端返回的数据。

handleCheckedCitiesChange： 定义复选款事件

handleCheckAllChange： 定义的全选事件

每当我触发一次 handleCheckedCitiesChange 事件后，checkedCities就会动态添加上新的数据

image.png

image.png

image.png

image.png

当你拿到这个值之后，直接对 checkedCities 重新进行赋值操作，直接等于value，就完成了表格的动态添加，但是我们知道，el-table 显示值的关键因素在于，lable 属性和 prop属性，因为我们刚刚拿到的只是名称，所以直接把v-for中的 item 直接赋值给 lable就可显示表头，对于 prop属性我们可以定义一个方法用于返回各项属性。

     changeTem(item){
        if(item == '日期'){
          return 'date'
        }else if( item == '姓名' ){
          return 'name'
        }else if( item == '地址' ){
          return 'address'
        }else if( item == '状态' ){
          return 'status'
        }else if( item == '年龄' ){
          return 'age'
        }else if( item == '性别' ){
          return 'sex'
        }
      },

image.png

这样为止一个基本的功能算是完成了。

但是我们的项目经理还是不死心，觉得必须要你按照给出的模板按顺序的展示表头，不管我如何添加数据一定是按照 姓名、地址、状态、日期、年龄、性别的顺序执行。顺序不能乱。

image.png

本着有功能就实现的原则，小编再次再教各位如何实现这块功能。其实也很简单，你只需要定义好一组项目经理说的顺序数据。例如：

image.png

然后我们在动态添加的时候，定义一个空的数组，将 handleCheckedCitiesChange（value）中的value与我们先前定义好的模板数组进行一个对比，做一次数组去重的操作，然后再通过冒泡排序的方式，对他们的id进行一个对比，这样一来，不管你如何添加数组，怎么点击，按照的顺序一定都是指定好的顺序，进行了。

附上代码：

     handleCheckedCitiesChange(value) {

        // 数组去重
        let newArr = []
         for (let i = 0; i < cityOptions.length; i++) {
          for (let j = 0; j < value.length; j++) {
            if(value[j] === cityOptions[i].name){
                newArr.push(cityOptions[i]);
            }
        }
      }

      // 冒泡排序
      for(let i = 0;i<newArr.length;i++){
        for(let j = 0;j<newArr.length -i-1;j++){
          if(newArr[j].id > newArr[j+1].id){
              var swap=newArr[j];
              newArr[j]=newArr[j+1];
              newArr[j+1]=swap;
          }
        }
      }
      
      let seconde_newArr = newArr
      
      this.checkedCities = seconde_newArr.map(item =>{
        let name = item.name
        return name
      })
      


        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },

还有的小伙伴会说，我们项目中表头最开始的时候有一个勾选的复选框以及结尾有个操作按钮啊，用来做日常的增删改操作。那这里就更简单啦。

image.png

image.png

所以不需要想的很复杂，只需要记住一点，这个表格没啥特别之处，修改的只有动态的数据，其他都是按部就班就行，一样的写法。

这样一个完整el-table动态表格渲染的功能已经完成啦。各位看官我是把馒头掰碎了喂你们嘴里，觉得有用的话，动动发财的小手点赞 + 关注，后期持续更新一些有用的东西。今天就到这啦，拜拜。

avatar
文章
阅读
粉丝