查询列表展示避免后端总是加字段的高效方法

最新推荐文章于 2025-04-20 14:16:50 发布

一只渣渣程序员

最新推荐文章于 2025-04-20 14:16:50 发布

阅读量295

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_38906445/article/details/106842334

本文介绍了一种高效的方法来处理前端动态展示列表字段的问题，通过在data中定义字段配置，实现列表展示的灵活性和可扩展性，有效避免了产品需求变更时频繁修改HTML模板的繁琐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查询列表展示避免后端总是加字段的高效方法以及动态列表的生产方法

我之前写都是把列表字段直接写在了HTML页面里这样当后期产品需要加字段时就比较麻烦
一个好的方法就是将字段写在了data里，通过循环加上去

showTableList: [
        {
          label: "线索名称",
          prop: "clueName"
        },
        {
          label: "线索编号",
          prop: "clueNo",
          size: "180"
        },
        {
          label: "线索手机号",
          prop: "contactPhone",
          size: "120"
        },
        {
          label: "线索类型",
          prop: "typeDesc"
        },
        {
          label: "行政区域",
          prop: "addressJoin"
        },
        {
          label: "创建来源",
          prop: "sourceDesc"
        },
        {
          label: "当前归属人",
          prop: "bdInfoJoin",
          size: "150"
        },
        {
          label: "归属人组织",
          prop: "wholeName"
        },
        {
          label: "线索创建时间",
          prop: "createDate",
          size: "180"
        },
        {
          label: "状态",
          prop: "statusDesc"
        }
      ]
```<el-table-column
          v-for="(column, index) in showTableList"
          :key="index"
          :label="column.label"
          :width="column.size"
        >