如何在动态表头的情况下将数据渲染到表格--element-ui

 应用场景：列表单元格的值和列表的表头不在一张表里面，也就是动态表头

data () {
    return {
      // 加载状态
      loading: false,
      // 显示空数据页面
      showNone: true,
      // 总条数
      total: 0,
      // 分类名称
      typeName: '',
      // 标题
      title: '',
      // 产品列表
      productList: [],
      // 表头
      colums: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 6,
        typeName: '',
        values: []
      },
      // 查询条件
      searchItems: [],
    }
      // 分类id
      typeId: null,
      // 分类名称列表
      typeNames: [],
      // 展示分类名称列表
      showNames: false,
     // 固定查询条件
      fixedItems: [
        {
          fieldId: null,
          sequence: 1,
          fieldName: '物料图号',
          searchable: 1,
          comparable: 1,
          required: 1,
          fieldValue: ''
        },
        {
          fieldId: null,
          sequence: 2,
          fieldName: '物料名称',
          searchable: 1,
          comparable: 0,
          required: 1,
          fieldValue: ''
        },
        {
          fieldId: null,
          sequence: 3,
          fieldName: '竞品图号',
          searchable: 1,
          comparable: 0,
          required: 1,
          fieldValue: ''
        }
      ],
  },

这段代码是一个 Vue.js 组件中的 data() 方法，用于定义组件的数据属性。以下是每个属性的简要说明：

• loading: 控制加载状态的布尔值。
• showNone: 控制是否显示空数据页面的布尔值。
• total: 总条数，表示数据总数。
• typeName: 分类名称，用于记录当前的分类。
• title: 标题，用于记录页面标题。
• productList: 产品列表，存储从后端获取的产品数据。
• colums: 表头，存储表格的列信息。
• queryParams: 查询参数对象，包含用于向后端发送请求的查询条件，具体包括：
  • pageNum: 当前页码，表示当前页的页数。
  • pageSize: 每页显示的数据条数。
  • typeName: 分类名称的查询条件。
  • values: 存储其他查询条件的数组。

这些数据属性将被用于在组件中存储和管理相关的数据，并通过数据绑定在模板中进行显示和操作。

methods: {
    getList () {
      this.queryParams.typeName = this.typeName
      getProductByParams(this.queryParams).then(res => {
        if (res.code === 200) {
          this.productList = res.data.page.records
          this.productList.forEach(item => {
            item.values.forEach((val, index) => {
              if (val.fieldValue === null || val.fieldValue === '') {
                item.values[index].fieldValue = '/'
              }
            })
          })
          this.colums = res.data.fields
          this.colums.forEach((item, index) => {
            this.product[index.toString()] = ''
          })
          this.product.values = this.colums
          this.total = res.data.page.total
          this.title = res.data.typeName + '-'
          this.typeName = res.data.typeName
          this.typeId = res.data.typeId
          this.loading = false
          this.showNone = false
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    // 查询分类名称
    handleTypeNameQuery (query) {
      this.loading = true
      getTypeNames(query).then(res => {
        this.typeNames = res.data
        this.showNames = true
        this.loading = false
      })
    },
    // 查询所有分类名称
    handleTypeNameQueryAll () {
      this.loading = true
      getTypeNames('').then(res => {
        this.typeNames = res.data
        this.showNames = true
        this.loading = false
      })
    },
// 查询
    handleQuery () {
      this.productList.length = 0
      this.queryParams.values.length = 0
      for (let i = 0; i < this.searchItems.length; i++) {
        const data = {
          fieldName: this.searchItems[i].fieldName,
          fieldValue: this.searchItems[i].fieldValue
        }
        if (data.fieldValue !== undefined && data.fieldValue !== null && data.fieldValue !== '') {
          this.queryParams.values.push(data)
        }
      }
      if (this.typeName === '' && this.queryParams.values.length === 0) {
        this.$message({
          message: '请选择分类名称',
          type: 'warning'
        })
      } else {
        this.queryParams.pageNum = 1
        this.getList()
      }
    }
}

这段代码是一个 Vue.js 组件中的 methods 对象，包含了组件中的方法。以下是每个方法的简要说明：

• getList(): 获取产品列表的方法。该方法会根据查询参数 typeName 发起网络请求，获取后端返回的产品数据。如果请求成功，会将返回的产品数据进行处理，并更新组件中的相关属性，如 productList、colums、total 等。如果请求失败，会显示错误消息。
• handleQuery(): 处理查询操作的方法。该方法会重置 productList 和 queryParams.values 数组，并根据 searchItems 中的条件项创建查询参数，将非空的条件项添加到 queryParams.values 数组中。然后检查 typeName 和 queryParams.values 是否为空，若为空则显示警告消息，否则将 pageNum 重置为 1 并调用 getList() 方法。

这些方法用于处理组件中的逻辑和响应用户的操作，例如获取产品列表、处理查询操作等。它们在组件中通过事件绑定或其他方式触发。

<div>
            <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item v-for="item in searchItems" :key="item.fieldId">
                <span style="float: left;width: 80px">{{ item.fieldName }}:</span>
                <el-input
                  v-model="item.fieldValue"
                  placeholder="请输入"
                  clearable
                  @keyup.enter.native="handleQuery"
                  style="float: left;width: 70%;"
                />
              </el-form-item>
              <el-form-item>
                分类名称:&nbsp;&nbsp;<el-select
                style="width: 70%"
                v-on:focus="handleTypeNameQueryAll"
                @change="resetQuery"
                v-model="typeName"
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="handleTypeNameQuery"
                :loading="loading"
              >
                <el-option
                  v-for="item in typeNames"
                  :key="item.typeId"
                  :value="item.typeName">
                </el-option>
              </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>

上面这个表单主要是查询不同的分类就会展现不同表头的表格，调用的getList函数会获取到该分类下的数据。

            <el-table
              height="570"
              @selection-change="handleSelectionChange"
              :data="productList"
              style="margin-top: 15px">
              <el-table-column type="selection" width="55" align="center"/>
              <el-table-column
                v-for="(colum,index) in colums"
                :key="index"
                :prop="`values.${index}.fieldValue`"
                :label="colum.fieldName"
                min-width="150"/>
              <el-table-column
                label="操作"
                width="180"
                fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="mini"
                    @click="handleEdit(scope.row)">编辑
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="handleDelete(scope.row)">删除
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="competitorsCompare(scope.row)">比对
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              v-show="total>0"
              :total="total"
              :current-page.sync="queryParams.pageNum"
              :page-size.sync="queryParams.pageSize"
              :page-sizes="[6, 10, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              style="margin-top: 10px"
            >
            </el-pagination>

这段代码展示当搜索到不同分类渲染不同表头的表格时使用el-table组件如何渲染。