el-form新增组件

玩代码的菜鸟

已于 2023-07-19 14:50:25 修改

阅读量165

点赞数

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

于 2023-01-07 14:43:42 首次发布

本文链接：https://blog.csdn.net/junhian/article/details/128590794

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

element

3 篇文章 0 订阅

订阅专栏

文章展示了如何使用Vue.js创建一个包含编辑和删除功能的动态表格。表格中包含对接平台、对接类型和同步规则的选择，利用el-form、el-table、el-select等组件，并实现了添加新行、删除行以及数据验证的功能。

摘要由CSDN通过智能技术生成

当需求设计图是这样的，让我们做成可以

二话不说上代码：

html部分

<el-form ref="form" :model="model" label-width="145px">
        <el-form-item style="display: inline-block;" label="对接设置：">
          <el-button type="primary" style="margin-bottom: 10px;" size="mini" @click="addProjectInfoItem">+ 新增</el-button>
          <el-table header-row-class-name="addDialog" ref="scrollConcent" height="200" :data="model.platformList"
            border>
            <el-table-column width="220px" label="对接平台" align="center" style="">
              <template slot-scope="scope">
                <el-select style="width: 180px" v-model="scope.row.platformId" placeholder="请选择对接平台" filterable
                  clearable>
                  <el-option v-for="item in platList" :key="item.id" :label="item.label" :value="item.id"
                    :disabled="isProjectRoleDisabled(item, scope)"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column width="260" label="对接类型" align="center">
              <template slot-scope="scope">
                <el-select style="width: 230px" filterable multiple collapse-tags clearable
                  v-model="scope.row.hasThTypeList" placeholder="请选择对接类型">
                  <el-option v-for="item in hasTHTypeList" :key="item.id" :label="item.label"
                    :value="item.id"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column width="220" label="同步规则" align="center">
              <template slot-scope="scope">
                <el-select style="width: 180px" filterable clearable v-model="scope.row.isComplete"
                  placeholder="请选择同步规则">
                  <el-option v-for="item in completeList" :key="item.id" :label="item.label"
                    :value="item.id"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column width="80" label="操作" align="center">
              <template slot-scope="scope">
                  <el-button type="text" @click="onDeleteProjectInfoItem(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

页面已经弄好了，现在需要js逻辑处理部分

 data() {
    return {
      platList: [{
        id: '1',
        label: '对接1'
      }, {
        id: '2',
        label: '对接2'
      }],
      hasTHTypeList: [{
        id: '1',
        label: '类型1'
      }, {
        id: '2',
        label: '类型2'
      }],
      completeList: [{
        id: '1',
        label: '同步1'
      }, {
        id: '2',
        label: '同步2'
      }],
      model: {
        id: "",
        platformId: "",
        upload: false,
        key: "",
        code: "",
        secret: "",
        companyKey: "",
        companySecret: "",
        hasThUser: "0",
        hasThCar: "0",
        hasThEnvironmental: "0",
        // isComplete: 0,
        platformList: [
          {
            id: "",
            projectId: "",
            platformId: "",
            platformName: "",
            isComplete: '1',
            hasThTypeList: [],
            hasThList: []
          }
        ]
      },
    }
  },
  methods: {
    onDeleteProjectInfoItem(item) {
      let index = this.model.platformList.indexOf(item);
      this.model.platformList.splice(index, 1);
      this.model.machineDataSource = "";
    },
    isProjectRoleDisabled(item) {
      let id = item.id;
      for (let i = 0; i < this.model.platformList.length; ++i) {
        let proj = this.model.platformList[i];
        if (proj.platformId === id) return true;
      }
      return false;
    },
    changeVal() {
      console.log(this.model.platformList);
    },
    addProjectInfoItem() {
      let length = this.model.platformList.length;

      if (length && this.model.platformList[length - 1].isComplete === "") {
        this.$message.warning("请完善对接管理信息");
      } else {
        this.model.platformList.push({
          platformId: "",
          hasThTypeList: [],
          isComplete: ""
        });
        this.$nextTick(() => {
          this.$refs.scrollConcent.scrollTop = 100000000;
        });
      }
    },
  }

现在大功告成