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);
},
相关推荐
paopaokaka_luck5 分钟前
基于SpringBoot+Vue的数码交流管理系统(AI问答、协同过滤算法、websocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·websocket·echarts
Aoda11 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
幸运小圣12 分钟前
Set数据结构【ES6】
javascript·数据结构·es6
zxg_神说要有光21 分钟前
我好像找到了最适合我的生活状态
前端·javascript
爱上妖精的尾巴1 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏
MyFreeIT3 小时前
Page光标focus在某个控件
前端·javascript·vue.js
通往曙光的路上3 小时前
day8_elementPlus
前端·javascript·vue.js
Jeffrey__Lin3 小时前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
Miketutu3 小时前
vxe-table编辑模式适配el-date-picker
javascript·vue.js·elementui
咖啡の猫3 小时前
Vue-MVVM 模型
前端·javascript·vue.js