vue+element表单设置动态表头及内容

最新推荐文章于 2024-08-27 09:08:32 发布

小香菜籽

最新推荐文章于 2024-08-27 09:08:32 发布

阅读量1.5k

点赞数

分类专栏： vue项目中的问题（一）文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46858417/article/details/127058528

版权

vue项目中的问题（一）专栏收录该内容

26 篇文章 1 订阅

订阅专栏

本文介绍如何使用Vue.js结合Element UI组件库实现动态表头及表单内容的操作。通过v-for循环遍历table_head数组来动态生成表头，并绑定对应的prop属性到表单数据listData中。

摘要由CSDN通过智能技术生成

根据后台返回数据设置动态表头及表单内容操作

【1】前端表单样式

  <el-table
      size="small"
      :data="listData" //表单数据绑定
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <div v-for="(item, index) in table_head" :key="index">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
        ></el-table-column>
      </div>
    </el-table>

注意：v-for写在非template上，添加:key没有任何问题，但是写在template上就不行了，加了就报错。
在这里插入图片描述

【2】数据格式
在这里插入图片描述
利用prop属性绑定对应值，label绑定表头。

 {
            "prop": "checkStatData",
            "label": "日期"
          },
          {
            "prop": "checkStatName",
            "label": "姓名"
          },
          {
            "prop": "checkStatNum",
            "label": "工号"
          },

【3】表头及表单内容对应不同的数组，实现方法

data（）{
return{
listData: [], //表单数据
table_head: [], //表头数据
}
}

 CheckStatInfos(parameter)
        .then((res) => {
          this.loading = false;
          if (res.data.status == 500) {
            this.$message({
              type: "info",
              message: res.data.message,
            });
          } else {
            this.listData = res.data.data[1].data;//表头
            this.table_head = res.data.data[0].type;//表单数据内容
            // 分页赋值
            this.pageparm.currentPage = res.data.pageNum;
            this.pageparm.pageSize = res.data.pageSize;
            this.pageparm.total = res.data.totalSize;
          }
        })