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);
},
相关推荐
摸鱼仙人~26 分钟前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客26 分钟前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
前端小咸鱼一条1 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript
郑州小张1 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
吹牛逼专业户1 小时前
Vue中快速实现主题切换
vue.js
这是个栗子1 小时前
HTML(一)
javascript·ajax·css3·html5
uhakadotcom1 小时前
Python中@staticmethod和@classmethod的简单理解与实用示例
javascript·后端
BigData-01 小时前
vscode vue debug
ide·vue.js·vscode
DuxWeb2 小时前
Vue 组件渲染全解析:从基础原理到 JSON 渲染器的实战开发
vue.js
泡泡oO2 小时前
vue脱敏组件封装(适用于多种场景)——超详细手把手一步步教你使用
前端·javascript·vue.js