Vue+ElementUI实现点击加号动态添加

1.需求是点击加号图标往下增加,最多增加5行,最少显示一行(每条前面输入框不能为空及每条的前面输入框的值不能重复)

2.具体实现代码

<cbf-form-item label="位置长度" prop="textReplacement" label-width="80px"             
 class="PRuleList11">
        <div v-for="(item,index) in textReplacementList" :key="index">
          <cbf-input placeholder='请输入内容' :maxlength="10" v-model="item.sourceText" 
           class="width150 mr10" size="small"></cbf-input>
          <span>替换为</span>
          <cbf-input v-model="item.replacedText" placeholder='请输入内容,可为空' 
           :maxlength="10" class="width150 ml10 mr10" size="small"></cbf-input>

          <i class="iOscar iOscar-tianjia mr10" style="color: #409eff" @click="addDataTxt">            
          </i>
          <i class="iOscar iOscar-shanchu ml10" @click="delDataTxt(index)" v-if="index !=0" 
           style="color: #ebb563"></i>
        </div>
</cbf-form-item>

2-1 data定义  
    textReplacementList: [
      {
          sourceText: '',
          replacedText: '',
          order: ''
       }
     ],
2-2 rules配置
textReplacement: [{ required: true, trigger: "change", validator: this.rulesTxt }]

2-3 方法
rulesTxt(str, value, cllback) {
    let tempArray = [];
    if (this.formData.ruleType == 7) {
        for (let i = 0; i < this.textReplacementList.length; i++) {
          if (this.textReplacementList[i].sourceText === "") {
            cllback(new Error("替换前文本不得为空"));
            return;
          }
          // // 判断是否重复
          if (tempArray.includes(this.textReplacementList[i].sourceText)) {
            cllback(new Error("替换前文本不能重复"));
            return;
          }
          tempArray.push(this.textReplacementList[i].sourceText);
        }
    }
    cllback();
},
//添加
addDataTxt() {
   if (!this.textReplacementList) {
     this.$set(this.textReplacementList, []);
   }
   if (this.textReplacementList.length == 5) {
     return;
   }
   this.textReplacementList.push({
     sourceText: '',
     replacedText: '',
     order: ''
    });
},
//删除
delDataTxt(index) {
   this.textReplacementList.splice(index, 1);
},

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现可编辑动态表格的方法如下: 1. 在 Vue 中引入 Element UI 的 Table 组件,并设置 table 的 columns 和 data 属性。 2. 在 columns 中设置需要编辑的列的 type 属性为 "input"。 3. 在 data 中设置每个单元格的 editable 属性为 true,表示该单元格可以编辑。 4. 绑定 table 的 cell-click 事件,当用户点击单元格时,判断该单元格是否可以编辑,如果可以编辑,则将该单元格的 editable 属性设置为 false,同时保存该单元格的值。 5. 在单元格失去焦时,将该单元格的 editable 属性设置为 true,同时将修改后的值保存到 data 中。 以下是示例代码: ```html <template> <el-table :data="tableData" @cell-click="handleCellClick"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true" :type="'input'"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, address: '北京市' }, { name: '李四', age: 20, address: '上海市' }, { name: '王五', age: 22, address: '广州市' } ] } }, methods: { handleCellClick(row, column, cell, event) { if (column.editable) { cell.children[0].setAttribute('contenteditable', true) cell.children[0].focus() cell.children[0].addEventListener('blur', () => { cell.children[0].removeAttribute('contenteditable') row[column.prop] = cell.innerText }) } } } } </script> ``` 在上面的代码中,我们使用了 contenteditable 属性来实现单元格的可编辑。在 cell-click 事件中,当单元格可编辑时,我们将该单元格的 contenteditable 属性设置为 true,并且将焦设置到该单元格中。当单元格失去焦时,我们将 contenteditable 属性设置为 false,并且将修改后的值保存到 data 中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值