el-table 动态添加删除 -- 鼠标移入移出显隐删除图标

暴富暴富暴富啦啦啦2024-07-14 23:47

html 复制代码

 <el-table class="list-box" 
    :data="replaceDataList" border>
     <el-table-column label="原始值" prop="original" align="center" >
        <template slot-scope="scope">
           <div @mouseenter="showClickIcon = scope.$index" @mouseleave="showClickIcon = null">
               <el-input style="width:80%" v-model="scope.row.original" placeholder="输入原值" />
           </div>
        </template>
     </el-table-column>
     <el-table-column label="替换为" prop="replace" align="center" >
          <template slot-scope="scope">
            <div @mouseenter="showClickIcon = scope.$index" @mouseleave="showClickIcon = null">
                <div style="display:inline-block;width:80%" >
                    <el-input v-model="scope.row.replace" placeholder="输入替换值" />
                </div>
                <span v-if="showClickIcon == scope.$index" style="margin-left:10px">
                   <i @click="delRow(scope.$index)" class="el-icon-delete"></i>
                </span>
            </div>
         </template>
    </el-table-column>
</el-table>


<div class="addclass">
    <span @click="addRow">+ 添加</span>
</div>

javascript 复制代码

// 增加一行
addRow() {
  const row = {
      original: '',
      replace: '',
  };
  this.replaceDataList.push(row);
},
// 删除指定行
delRow(index) {
   this.replaceDataList.splice(index, 1);
},