el-table 动态column组件

原创于 2022-05-13 14:02:08 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

本文介绍了如何使用 Vue 的 Element UI 插件中的 el-table 根据headData中的列名和标签信息，动态为tableData的字段赋值，并设置列宽和对齐方式。示例中详细列举了headData的结构和对应的列配置代码。

根据headData中的column_name和column_label进行赋值，name为tableData的字段名，label为显示字段名称。

<el-table-column
   :prop="item.column_name"
   :label="item.column_label"
    :width="item.width === null ? 'auto' : item.width"
    :key="key"
    align="center"
 v-for="(item, key) in headData"
 />
  <!-- <template slot-scope="scope">
  </template> -->

headData以下为例


 headData: [
        {
          column_name: "project_name",
          column_label: "项目历史",
          width: "150",
        },
        {
          column_name: "place",
          column_label: "项目地点",
        },
        {
          column_name: "cooperation_state",
          column_label: "合作状态",
        },
        {
          column_name: "company",
          column_label: "公司名称",
        },
        {
          column_name: "name",
          column_label: "项目人",
        },
        {
          column_name: "company_two",
          column_label: "公司2",
        },

        },
      ],