element-ui之el-table改造动态自定义添加行

前端攻城狮·左大

已于 2022-01-19 12:14:18 修改

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： html5

于 2022-01-19 10:56:27 首次发布

本文链接：https://blog.csdn.net/weixin_46719868/article/details/122575904

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

业务需求：根据select下拉框的选中的数据动态加载其包含的属性值
在这里插入图片描述
业务实现：
html部分

<el-dialog :title="titleName" :visible.sync="DialogVisible" width="60%" center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="客户名称:">
          <el-select :disabled="isDis" @change="changeValueOne" v-model="form.tradeCode" placeholder="请选择客户名称">
            <el-option v-for="(item, index) in arrayOne" :key="index" :label="item.flagSettingInfo" :value="item.flagSettingCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签类型:">
          <el-select :disabled="isDis" @change="changeValueTwo" v-model="form.tempFieild1" placeholder="请选择标签类型">
            <el-option v-for="(item, index) in arrayTwo" :key="index" :label="item.flagSettingInfo" :value="item.flagSettingCode"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="dataNew" :show-header="fal" key="Table" style="width:100%;">
        <el-table-column>
          <template slot-scope="scope">
            <el-input style="display: inline-block;width:100px" v-model.trim="scope.row.custrelLablePropertyName" clearable> </el-input>
            <span>:</span>
            <el-input style="display: inline-block;width:150px;margin-left:10px" v-model.trim="scope.row.custrelLablePropertyValue" clearable> </el-input>
          </template>
        </el-table-column>

        <!-- <el-table-column>
          <template slot-scope="scope">
            <el-button v-if="scope.$index != 0" size="mini" type="text" @click="DeleteNew(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <span @click="adddataNew" style="cursor:pointer;color:#409eff;">+添加标签类型</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="DialogType == 'add'" @click="onAddSubmit(form)">确 定</el-button>
        <el-button type="primary" v-else @click="onEditSubmit(form)">确 定</el-button>
      </span>
    </el-dialog>

data部分

      dataNew: [{ custrelLablePropertyName: '', custrelLablePropertyValue: '' }],

js部分

//添加
 adddataNew() {
      this.dataNew.push({custrelLablePropertyName:'', custrelLablePropertyValue: '' })
    },
    //选中
 changeValueTwo() {
        API.queryCustrelLablePage({ custrelLableTypeTmp: this.form.tempFieild1, custrelLabletType: 1 }).then(res => {
        this.dataNew = res.list
      })
    },