美文网首页
vue element ui 实现动态表格/表单(新增/删除行)

vue element ui 实现动态表格/表单(新增/删除行)

作者: web30 | 来源:发表于2021-04-19 16:17 被阅读0次

    其实element-ui Form 表单已经有介绍了,之前没注意到,链接地址:
    https://element.eleme.cn/#/zh-CN/component/form#dong-tai-zeng-jian-biao-dan-xiang

    一、表格动态新增行

    表格动态新增行
    <template>
        <el-button type="primary" size="small"  @click="addParamsSetting">新增</el-button>
    
        <el-form ref="paramsSettingForm" :model="paramsSettingForm" size="small">
                 <el-table
                   :data="paramsSettingForm.tableData"
                   style="width: 100%"
                   class="list-table"
                   size="mini"
                   border>
                   <el-table-column prop="beginTime" label="开始时间" width="300" >
                     <template slot-scope="scope">
                      <el-form-item label="" :prop="'tableData.' + scope.$index + '.beginTime'" :rules="[{ required: true, message: '开始时间不可为空', trigger: 'change' }]">
                        <el-time-picker
                          size="mini"
                          value-format="HH:mm:ss"  // 时间以时/分/秒展示
                          v-model="scope.row.beginTime"
                          :picker-options="{selectableRange: '09:00:00 - 21:00:00'}"
                          placeholder="开始时间">
                        </el-time-picker>
                      </el-form-item>
                     </template>
                   </el-table-column>
                   <el-table-column prop="endTime" label="结束时间" width="300">
                     <template slot-scope="scope">
                      <el-form-item label="" :prop="'tableData.' + scope.$index + '.endTime'" :rules="[{ required: true, message: '结束时间不可为空', trigger: 'change' }]">
                       <el-time-picker
                        size="mini"
                        value-format="HH:mm:ss"
                         v-model="scope.row.endTime"
                         :picker-options="{selectableRange: '09:00:00 - 21:00:00'}"
                         placeholder="结束时间">
                       </el-time-picker>
                      </el-form-item>
                     </template>
                   </el-table-column>
                   <el-table-column label="操作">
                     <template slot-scope="scope">
                       <el-button @click.native.prevent="deleteRow(scope.$index)" type="text" size="small">删除</el-button>
                     </template>
                   </el-table-column>
                 </el-table>
               </el-form>
    </template>
    
    data(){
      paramsSettingForm: { // 呼叫参数设置
            tableData: [{
              beginTime: '',
              endTime: ''
            }]
          },
      methods: {
        addList () {
          this.paramsSettingForm.tableData.push({
            beginTime: '',
            endTime: ''
          }),
        // 新增 有效拨打时间
        addParamsSetting () {
          this.addList()
        },
      // 删除当前行
        deleteRow (index) {
          this.paramsSettingForm.tableData.splice(index, 1)
        },
      }
    }
    

    二、表单动态新增行

    表单动态新增行
    <div style="display:flex" :key="i" v-for="(item, i) in conditionForm.introductionList">
        <el-form-item label="产品介绍素材" :prop="'introductionList.' + i + '.presentationId'" :rules="[{required:true,message:'不能为空',trigger:'blur'}]">
          <!-- 这里双向绑定用循环的每一项(item),不然每新增行,你去选择的话会影响其它行 --> 
           <el-select clearable v-model="item.presentationId" placeholder="请选择">
               <el-option
                    v-for="item in presentationIdList"
                    :key="item.id"
                    :label="item.presentationName"
                    :value="item.id">
                </el-option>
            </el-select>
         </el-form-item>
    
         <el-form-item label="产品介绍场景" :prop="'introductionList.' + i + '.sceneProposalId'" :rules="[{required:true,message:'不能为空',trigger:'blur'}]">
           <el-select clearable v-model="item.sceneProposalId" placeholder="请选择">
                  <el-option
                       v-for="item in proposalList"
                       :key="item.id"
                       :label="item.sceneName"
                       :value="item.id">
                  </el-option>
             </el-select>
          </el-form-item>
          <i v-if="i === 0" @click="addIntroductionList" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-circle-plus"></i>
          <i v-if="i > 0" @click="deleteIntroductionList(i)" style="font-size:20px;color:#25c4fe;margin:8px 0 0 10px;" class="el-icon-remove"></i>
    </div>
    
    data(){
      return{
          conditionForm: {
            introductionList: [{
              presentationId: '',
              sceneProposalId: ''
            }]
        }
      }
    },
    methods: {
      // 新增
      addIntroductionList () {
          this.conditionForm.introductionList.push({
            presentationId: '',
            sceneProposalId: ''
          })
        },
        // 删除
        deleteIntroductionList (index) {
          this.conditionForm.introductionList.splice(index, 1)
        },
    }
    

    也可以参考此资料:https://www.cnblogs.com/zdd2017/p/11065429.html

    相关文章

      网友评论

          本文标题:vue element ui 实现动态表格/表单(新增/删除行)

          本文链接:https://www.haomeiwen.com/subject/siztlltx.html