Vueと要素uiでダイナミックなフォルムを実現

vue の開発ではさまざまな要件に遭遇しますが、要素 ui の動的フォームのソースコードを共有しましょう。

テンプレートでは、要素 ui の形式 el-table および v-for のレンダリングが使用されます。

<template>
  <div>
    <el-container>
      <el-main>
        <div>
          <el-table border :data="tableData" style="width: 100%">
            <!-- 序号 -->
            <el-table-column
              prop="date"
              align="center"
              label="序号"
              :resizable="false"
              type="index"
              width="50"
            >
            </el-table-column>
            <!-- //  动态循环表头数据 -->
            <el-table-column
              :label="item.val"
              v-for="(item, index) in tableHead"
              :key="index"
              align="center"
            >
              <template scope="scope">
                <span>{
   
   { scope.row[item.item] }}</span>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column
              fixed="right"
              label="操作"
              width="160"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope)"
                  type="primary"
                  size="small"
                  >查看</el-button
                >
                <el-button type="primary" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

データは 2 つに分かれています。1 つ目はテーブルヘッダーのデータ、2 つ目はテーブルのデータです。

<script>
export default {
  data() {
    return {
      //  表头数据
      tableHead: [
        { val: "指标11111", item: "target1" },
        { val: "指标2", item: "target2" },
        { val: "指标3", item: "target3" },
        { val: "指标4", item: "target4" },
        { val: "指标5", item: "target5" },
      ],
      // 表格数据
      tableData: [
        {
          item: "项目1",
          target1: 1111111111111111,
          target2: 2,
          target3: 3,
          target4: 4,
          target5: 5,
        },
        {
          item: "项目2",
          target1: 2111110,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
        },
      ],
    };
  },
  methods: {
      handleClick(scope){
          console.log(scope.row);
      }
  },
};
</script>

スタイルは何もありません。要素 ui をダウンロードしたときに el-table 自体が運ばれたためです。

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
</style>

レンダリング:

Vueと要素uiでダイナミックなフォルムを実現

おすすめ