别样的表格操作：vue + element 实现动态表格-Toy模板网

这篇具有很好参考价值的文章主要介绍了别样的表格操作：vue + element 实现动态表格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

在 web 开发中，动态表格已经成为了一个非常常见的需求。而 vue 和 element 这两个框架的强大之处，就在于如何优雅地实现这样的需求。在本篇文章中，我们将探讨 vue 和 element 之间的结合，以及如何在其中实现动态表格的功能。

实现效果：

别样的表格操作：vue + element 实现动态表格

实现思路：

静态表格

大家都知道 element 表格组件的表头默认是静态写死的，我们在渲染数据时只需要将接口返回的数组动态绑定给 data 属性，然后再通过 prop 去对应字段项即可；但是静态的表头并不能满足一些特殊的使用场景，所以我们需要将它变成活的，也就是动态渲染表头，然后再将表格中的数据一一对应表头。

动态表格

与静态表格返回的数据格式不同（如下图），动态表格一般会返回两个数组，分别对应表头数据、表格数据，我们需要将表头的数组在 <el-table-column></el-table-column> 中进行循环，用 :label 绑定循环的表头字段名，用 :prop 绑定表格中的字段名。

表头数据格式：

别样的表格操作：vue + element 实现动态表格

表格数据格式：

别样的表格操作：vue + element 实现动态表格

表格中用到的属性：

属性	描述	类型	默认值
highlight-current-row	是否要高亮当前行	boolean	false
cell-style	改变单元格样式	Function({row, column, rowIndex, columnIndex})/Object	–

下面是我做的一个简单小实例，其中不止包含动态表格，还有其他方面的一些小功能（根据条件让单元格变色、根据条件控制单元格是否可编辑）

源码如下：

<template>
  <div>
    <el-dialog title="编辑" :visible.sync="centerDialogVisible" width="80%">
      <el-table class="tableBox" :data="tableData" align="center" border style="width: 100%;" :cell-style="myclass" highlight-current-row>
        <el-table-column align="center" v-for="(item, index) in headData" :key="index" :prop="item.value" :label="item.zwname">
          <template slot-scope="scope">
            <!--// 通过 v-if="!item.sfkgg" 控制是否可编辑单元格 //-->
            <el-input v-if="!item.sfkgg" v-model="scope.row[index] && scope.row[index].value" clearable />
            <span>{{scope.row[index] && scope.row[index].value}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="present ">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: true, //弹框显隐状态
      // 模拟表头数据
      headData: [
        {
          zwname: "id", //表头
          sfkgg: true, //判断单元格是否可编辑
          sfcb: null, //判断字体是否变色
        },
        {
          zwname: "姓名",
          sfkgg: true,
          sfcb: null,
        },
        {
          zwname: "性别",
          sfkgg: false,
          sfcb: true,
        },
        {
          zwname: "年龄",
          sfkgg: false,
          sfcb: true,
        },
        {
          zwname: "地址",
          sfkgg: false,
          sfcb: true,
        },
        {
          zwname: "联系方式",
          sfkgg: false,
          sfcb: true,
        },
      ],
      // 模拟表格数据
      tableData: [
        [
          {
            zwname: "样品编号",
            zdm: "ypbh",
            value: "id20200719",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "样品名称",
            zdm: "ypmc",
            value: "小明",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "分配省公司",
            zdm: "fpsgs",
            value: "男",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "受检单位",
            zdm: "sjdw",
            value: "20",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "油号",
            zdm: "yhbh",
            value: "北京昌平",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "抽样地点",
            zdm: "cydd",
            value: "18812349874",
            sfkgg: true,
            sfcb: false,
          },
        ],
        [
          {
            zwname: "样品编号",
            zdm: "ypbh",
            value: "id20220102",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "样品名称",
            zdm: "ypmc",
            value: "小红",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "分配省公司",
            zdm: "fpsgs",
            value: "女",
            sfkgg: true,
            sfcb: false,
          },
          {
            zwname: "受检单位",
            zdm: "sjdw",
            value: "18",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "油号",
            zdm: "yhbh",
            value: "北京海淀",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "抽样地点",
            zdm: "cydd",
            value: "18856432547",
            sfkgg: true,
            sfcb: null,
          },
        ],
        [
          {
            zwname: "样品编号",
            zdm: "ypbh",
            value: "id20220717",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "样品名称",
            zdm: "ypmc",
            value: "小蓝",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "分配省公司",
            zdm: "fpsgs",
            value: "未知",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "受检单位",
            zdm: "sjdw",
            value: "21",
            sfkgg: true,
            sfcb: false,
          },
          {
            zwname: "油号",
            zdm: "yhbh",
            value: "北京朝阳",
            sfkgg: true,
            sfcb: null,
          },
          {
            zwname: "抽样地点",
            zdm: "cydd",
            value: "16634219856",
            sfkgg: true,
            sfcb: null,
          },
        ],
      ],
    };
  },
  mounted() {},
  methods: {
    //根据条件修改单元格字体样式（sfcb字段为false且不为null时）
    myclass({ row, columnIndex }) {
      if (row[columnIndex] && !row[columnIndex].sfcb && row[columnIndex].sfcb != null ) {
        return "color: red";
      }
    },
    // 提交操作
    present() {
      let result = [];
      // 通过双层循环拿到所需字段
      this.tableData.forEach((item) => {
        let data = {};
        item.forEach((e) => {
          // 将字段名、字段值以键值对的形式赋值
          data[e.zdm] = e.value;
        });
        // 每一行数据为一个对象添加到数组中 [{},{},{},...]
        result.push(data);
      });
      console.log(result, "参数");
      // 执行接口操作
    },
  },
};
</script>

<style scoped>
.tableBox {
  margin-bottom: 20px;
}
/* 通过显隐控制input框的状态 */
.tableBox .el-input {
  display: none;
}
.tableBox .current-row .el-input {
  display: block;
}
.tableBox .current-row .el-input + span {
  display: none;
}
</style>