vue elementUI el-table 表格双击可编辑

快来打我* 2023-01-20 15:52 24阅读 0赞

<template>
    //表格也可以写成原生的table
    <el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
           <el-table-column property="order1" label="顺序"></el-table-column>
           <el-table-column property="order2" label="装车点">
               <template slot-scope="scope">
                   <el-input v-model="scope.row.order2" placeholder="请输入内容"></el-input>
               </template>
           </el-table-column>
    </el-table> 
    </template>
     
    <script>
    export default{
        data(){
            return{}
        },
        methods:{
        tableDbEdit(row, column, cell, event) {
              console.log(row, column, cell, event);
              if (column.label != "顺序") {
                event.target.innerHTML = "";
                let cellInput = document.createElement("input");
                cellInput.value = "";
                cellInput.setAttribute("type", "text");
                cellInput.style.width = "80%";
                cell.appendChild(cellInput);
                cellInput.onblur = function() {
                  cell.removeChild(cellInput);
                  event.target.innerHTML = cellInput.value;
                };
            }
         }
        }
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关 EASYUI table双击编辑、结束编辑

EASYUI实现双击行编辑，双击正在编辑的行结束编辑功能。 $(function(){ initTable6(); });

分手后的思念是犯贱/ 2023年10月05日 18:33/ 0 赞/ 118 阅读

相关 vue elementUI el-table 表格双击可编辑

<template> //表格也可以写成原生的table <el-table :data="addPlanRoute" border style="wi

快来打我*/ 2023年01月20日 15:52/ 0 赞/ 25 阅读

相关 html表格无法编辑,html 可编辑表格

场景：HTML+JS兑现可编辑表格 HTML+JS实现可编辑表格实现可视化编辑表格操作... HTML文件: 编辑表格数据可编辑的表格 <table>

ゝ一世哀愁。/ 2022年10月09日 13:28/ 0 赞/ 439 阅读

相关 html双击变成可编辑状态,JS实现双击编辑可修改状态的方法

本文实例讲述了JS实现双击编辑可修改状态的方法。分享给大家供大家参考。具体如下：这是现在流行的一个表单特效，在网页上单击某文字，文字变为编辑状态，或者是让输入新文字，这就是

桃扇骨/ 2022年10月05日 12:49/ 0 赞/ 483 阅读

相关可编辑表格TableCell

方法一\----------------------------------------------------------------------------- <html

客官°小女子只卖身不卖艺/ 2022年08月17日 15:28/ 0 赞/ 353 阅读

相关双击文本实现可编辑

双击文本实现可编辑 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w

r囧r小猫/ 2022年08月10日 13:48/ 0 赞/ 313 阅读

相关 jQuery 单击编辑双击编辑保存

<mce:script language="javascript" type="text/javascript"><!-- jQuery(docum

淩亂°似流年/ 2022年07月12日 13:41/ 0 赞/ 328 阅读

相关 js和jQuery实现双击表格变为可编辑状态

看到别人的代码，自己分析加的备注，直接上代码！ <style type="text/css"> body \{ font-size: 12px; \}

桃扇骨/ 2022年06月18日 05:14/ 0 赞/ 334 阅读

相关 Vue基于ElementUI实现Table可编辑/添加功能

文章目录效果预览前端代码添加和修改的js 效果预览 ![在这里插入图片描述][20190619134138552.gif] 前端代码

淩亂°似流年/ 2022年01月11日 02:47/ 0 赞/ 455 阅读

相关 JQuery 双击动态编辑

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="./js/jquery.js"></script>

客官°小女子只卖身不卖艺/ 2021年12月21日 12:37/ 0 赞/ 435 阅读