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

业务需求:根据select下拉框的选中的数据动态加载其包含的属性值
element-ui之el-table改造 动态自定义添加行_第1张图片
业务实现:
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>
      <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
      })
    },

你可能感兴趣的:(笔记,html5)