前端 - 需求：渲染一个表格，根据下拉菜单里面的条件做筛选。每个条件背后的数据模型各有差异，如何实现根据条件动态的渲染表头和内容呢？
现有两个查询条件，一个是日期时间,一个是下拉菜单选项。
条件选择部分的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个答案
<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 }; }); } }, }-
Mpx中的条件渲染与原生小程序中完全一致，详情可以查看这里 简单示例如下: <template> <view class="container"> <!-- 通过 wx:if 的语法来控制需要渲染的元素 --> <view wx:if="{{ score > 90 }}"> A </view> <view wx:elif="{{ score > 60 }}"> B </
-
本文向大家介绍深入理解Vue 的条件渲染和列表渲染，包括了深入理解Vue 的条件渲染和列表渲染的使用技巧和注意事项，需要的朋友参考一下 这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的，而且很重要，所以，今天添加一点小笔记。 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候，我们需要将它添加到这个元素上去。然而如果要切换很
-
主要内容：React 实例,元素变量,React 实例,与运算符 &&,React 实例,三目运算符,阻止组件渲染,React 实例在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。 先来看两个组件: 我们将创建一个 Greeting 组件，它会根据用户
-
v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}} 在 Vue.js ，我们使用 v-if 指令实现同样的功能： <h1 v-if="ok">Yes</h1> 也可以用 v-else 添加一个 "else" 块： <h1 v-if="ok">Yes</
-
本文向大家介绍ListView实现下拉动态渲染数据，包括了ListView实现下拉动态渲染数据的使用技巧和注意事项，需要的朋友参考一下 这是一篇关于LIstView实现动态数据渲染的文章！ 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案 前提比如我们数据是100条+ 第一：一次性把100条数据fetch过来 然后由前端JS代码来做分页处理（如每次渲染10条） 第二：在server端
-
问题内容： 我有以下组成部分： article_list.jsx 尽管JSON请求工作正常，并且返回了包含五个JSON对象的数组，但它们只是不呈现！ 我是ReactJS的新手，并且阅读（并观看了）很多教程，但是似乎我缺少一些东西。 有什么建议？ 问题答案： forEach中的return语句不返回值，而是像语句一样，您需要使用map 否则，如果要使用forEach，则需要修改代码，例如