(vue)键值对结构数据展示

最新推荐文章于 2024-04-08 12:40:03 发布

nyf_unknown

最新推荐文章于 2024-04-08 12:40:03 发布

阅读量641

点赞数 7

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44754635/article/details/135676691

版权

VUE 专栏收录该内容

191 篇文章 2 订阅

订阅专栏

(vue)键值对结构数据展示

效果：
在这里插入图片描述

数据结构：

this.formInline.algorithmText = [
	{
	  algorithmParameters: {
	    参数名1: "111",
	    参数名2: "121,122",
	  },
	  algorithmName: "算法1",
	  algorithmId: 9,
	},
	{
	  algorithmParameters: {
	    参数名1: "211",
	    参数名2: "221,222",
	  },
	  algorithmName: "算法2",
	  algorithmId: 11,
	},
];

展示：

<div v-for="(ele,index) of formInline.algorithmText" :key="index">
  <div>
    <el-form-item :label="'设置'+ele.algorithmName+'参数：'"></el-form-item>
  </div>
  <el-form-item
    v-for="(item,index) in Object.keys(ele.algorithmParameters)" //重点
    :key="index"
    :label="item"
    class="descInput"
  >
    <el-input
      v-model="ele.algorithmParameters[item]" //重点
      placeholder="请输入"
      @change="paramsChange"
    /> 
  </el-form-item>
</div>