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

站长

2024年06月26日 08:31 · 阅读数 21

现有两个查询条件，一个是日期时间,一个是下拉菜单选项。条件选择部分的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 })
      })

1个回答

test

2024-06-26

<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 };
      });
    }
  },
  
}

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容