需求：渲染一个表格，根据下拉菜单里面的条件做筛选。每个条件背后的数据模型各有差异，如何实现根据条件动态的渲染表头和内容呢？

  • Z时代
  • 2024-02-25
  • 分类：IT

现有两个查询条件，一个是日期时间,一个是下拉菜单选项。
条件选择部分的ui：

 <el-form :inline="true" :model="formInline">
        <el-form-item label="工位号" style="font-weight: bold">
          <el-select v-model="formInline.value" placeholder="请选择工位">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始时间-截止时间" style="font-weight: bold">
          <el-date-picker
            v-model="formInline.value1"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search(formInline)">查询</el-button>
        </el-form-item>
      </el-form>

下拉菜单：
需求：渲染一个表格，根据下拉菜单里面的条件做筛选。每个条件背后的数据模型各有差异，如何实现根据条件动态的渲染表头和内容呢？
数据源alldata:
每个条件对应的数据模型前几个字段相同，区别于data字段

async getAllData () {
      this.allData = [
 {
          id: '0',
          bar_no: '#P003844002672#v1',
          process_no: 'OP30',
          do_time: '2023-09-12 14:23:34',
          ok_flag: 'OK',
          ng_msg: '1111',
          data001: 'right'
        },
        {
          id: '1',
          bar_no: '#P003844002672#v0',
          process_no: 'OP50-1',
          do_time: '2023-09-13 11:23:34',
          ok_flag: 'OK',
          ng_msg: '1111',
          data001: 'right',
          data002:'OK',
          data003: 'right',
        },
        {
          id: '2',
          bar_no: '#P003844002672#v2',
          process_no: 'OP70-1',
          do_time: '2023-09-14 10:23:34',
          ok_flag: 'OK',
          ng_msg: '1111',
          data001: 'right',
          data002: 'right',
          data003:'OK', 
          data004:'OK', 
          data005:'OK', 
          data006:'OK',
          data007:'OK',
        },
        {
          id: '3',
          bar_no: '#P003844002672#v3',
          process_no: 'OP90_temp2',
          do_time: '2023-09-15 13:23:34',
          ok_flag: 'OK',
          ng_msg: '1111',
          data001: 'right',
          data002: 'right',
          data003: 'right',
          data004: 'right',
        }
]

希望选中某一个工位后能够根据它对应的数据模型渲染出表头和内容。
这是我自己的解决办法，前提是所有数据模型都相同的情况：

 getCols () {
      const col = Object.keys(this.allData[0]).map(item => {
        return ({ prop: item, label: item })
      })

回答：

<el-table :data="filteredData">
  <el-table-column
    v-for="col in dynamicCols"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label"
  ></el-table-column>
</el-table>
methods: {
  search(formInline) {
    // 筛选数据
    this.filteredData = this.allData.filter(data => data.process_no === formInline.value);
    // 动态生成列
    if (this.filteredData.length > 0) {
      this.dynamicCols = Object.keys(this.filteredData[0]).map(item => {
        return { prop: item, label: item };
      });
    }
  },
}

以上是 需求：渲染一个表格，根据下拉菜单里面的条件做筛选。每个条件背后的数据模型各有差异，如何实现根据条件动态的渲染表头和内容呢？ 的全部内容， 来源链接： utcz.com/p/935022.html

回到顶部