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

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);
},
相关推荐
小菜全10 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C10 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG10 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042711 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
秋秋小事11 小时前
React Hooks useContext
前端·javascript·react.js
ST.J11 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
拉不动的猪11 小时前
回顾vue中的Props与Attrs
前端·javascript·面试
耶啵奶膘12 小时前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹12 小时前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
生擒小朵拉12 小时前
STM32添加库函数
java·javascript·stm32