精华内容
下载资源
问答
  • 思路:给每条对应的数据都加上edit:false/true属性来控制该条数据对应的...1、统一给获取到的表格数据加入edit属性,默认为false,传入的参数t为表格的数据json initTbale(t) { t.forEach((item, index) => { fo

    思路:给每条对应的数据都加上edit:false/true属性来控制该条数据对应的单元格你内显示的是输入框还是文本内容

    html部分
    1、element文档中有写关于表格的事件
    element-table
    html部分
    2、每条数据对应都有edit属性,为true的时候显示输入框,为false显示文本内容
    html
    js部分:
    1、统一给获取到的表格数据加入edit属性,默认为false,传入的参数t为表格的数据json

       initTbale(t) {
          t.forEach((item, index) => {
            for (let i in item) {
              item[i] = {
                value: item[i],
                edit: false
              };
            }
          });
        },
    

    2、双击的时候让当前点击的数据edit为true,并获取焦点

        celledit(row, column, cell, event) {
          if (row[column.property]) {
            row[column.property].edit = true;
            setTimeout(() => {
              this.$refs[column.property].focus();
            }, 20);
          }
        },
    

    3、失去焦点的时候可以使所有数据的edit都变为flase

        // --table统一设置为不可编辑状态
        noeditTbale(t) {
          t.forEach((item, index) => {
            for (let i in item) {
              item[i].edit = false;
            }
          });
        }
    

    4、如果失去焦点要上传数据,一定记得把edit属性去掉

        // 逆向初始化 --table去掉编辑属性
        reverseTbale(t) {
          t.forEach((item, index) => {
            for (let i in item) {
              item[i] = item[i].value;
            }
          });
        },
    


    这样 简单地双击编辑单元格就完成了

    展开全文
  • 由于下载下来报了一系列BUG,修改内容 我提的一个Issues-5由于刚入坑Vue二天。依靠朋友帮助下修改之后成功使用的。主要部分代码在template中 引入---------------在 script 中 使用export default {name: 'myTable',...

    由于下载下来报了一系列BUG,修改内容 我提的一个Issues-5

    由于刚入坑Vue二天。依靠朋友帮助下修改之后成功使用的。

    主要部分代码

    在template中 引入

    ---------------

    在 script 中 使用

    export default {

    name: 'myTable',

    data: function () {

    return {

    data: [

    {name: '123'},

    {name: '4451'}

    ]

    }

    },

    methods: {

    // e :事件

    // field :字段,用于告诉服务端要更新哪个字段

    // user :列表中某一行数

    editable: function (e, field, user) {

    let that = this

    that.$editable(e, function (value) {

    })

    }

    }

    }

    主要代码:

    import VueEditable from '@/plugins/vueEditable'

    Vue.use(VueEditable)

    展开全文
  • Vue表格table双击改变编辑事件

    千次阅读 2020-02-23 22:31:18
    //表格也可以写成原生的table <el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit"> <el-table-column property="order1" label="顺序"></el-tabl...
    
    <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>
    
    
    展开全文
  • 补充下拉框编辑的代码 <el-table-column align="center" width="150" label="label"> <template slot-scope="scope"> <span v-show="!scope.row.isEditCellData">{{scope.row.data}}</span...

    2020/10 究极版 优化代码 

    <el-table :data="tableData" @cell-dblclick="cellDblclick">
    <!-- 下拉 -->
    <el-table-column prop="select">
        <template slot-scope="scope">
           <span v-if="!scope.row.isEditSelect" >{{scope.row.select}}</span>
           <el-select
                  v-if="scope.row.isEditSelect"
                  v-model="scope.row.select"
                  filter
                  ref="isEditSelect"
                  @change="compHidden(scope.row,'isEditSelect')"
                  @visible-change="val=>compHidden(scope.row,'isEditSelect',val)"
            >
                <el-option
                   v-for="item in dataOptions"
                   :key="item.id"
                   :value="item.id"
                   :label="item.value"
                ></el-option>
            </el-select>
         </template>
    </el-table-column>
    <!-- 文本框 --> 
    <!-- 日期框同文本框,只需要改标签名 -->
    <el-table-column prop="input">
            <template slot-scope="scope">
               <span v-if="!scope.row.isEditInput">{{scope.row.input}}
               </span>
               <el-input v-if="scope.row.isEditInput" 
                         v-model="scope.row.input"
                         ref="isEditInput"
                         @keyup.enter.native="compHidden(scope.row,'isEditInput')" 
                         @blur="compHidden(scope.row,'isEditInput')"
                ></el-input>
            </template>
    </el-table-column>

    注:el-select 一定要下filter属性,这样 下拉框获取焦点后才能弹出下拉框 

    getTableData() {
        this.$axios(url).then(res =>{
            this.tableData = res.data.data
            if (this.tableData.length > 0) {
                this.tableData.forEach(i => {
                    i.isEditInput = false;
                    i.isEditSelect= false;
                })
            }
        })
    }
    
    cellDblclick(row, column) {
        const columnObj = {
            input: 'isEditInput',
            select: 'isEditSelect',
        }
        if (columnObj[column.property]) {
            this.$set(row,columnObj[column.property],true)
            this.tableData.sort()
            this.$nextTick(() => {
                this.$refs[columnObj[column.property]].focus()
            })
        }
    }
    
    compHidden(row,property,flag) {
        if (!falg) {
            this.$set(row,property,false)
            this.tableData.sort()
        }
    }

     

    分割线后的代码可以不用看了.....我留着以后作对比用

    ------------------------------------------

    补充下拉框编辑的代码

    <el-table-column align="center" width="150" label="label">
        <template slot-scope="scope">
           <span v-show="!scope.row.isEditCellData">{{scope.row.data}}</span>
           <el-select
                  v-if="scope.row.isEditCellData"
                  v-model="scope.row.data"
                  placeholder="请选择数据"
                  v-on:change="updateRow(scope.row,'data')"
            >
                <el-option
                   v-for="item in dataOptions"
                   :key="item.id"
                   :value="item.id"
                   :label="item.value"
                ></el-option>
            </el-select>
         </template>
    </el-table-column>
    
    // dataOptions的数据我就不列出来了
    // isEditCellData为判断是否能编辑的标识,如果没有这个字段可以在获取的时候添加进去,具体代码在下面可以找到
    // v-on:change="updateRow(scope.row,'data')" 这个事件的意思是当我进行了下拉选项的选择后就触发

     

    // 修改子表单元格事件
        updateRow(row, property) {
          var dataObj= {};
          dataObj.id = row.id;
          dataObj[property] = row[property];
          this.$axios({
            method: "post",
            url: `url`,
            data: dataObj// data根据自己的接口传需要的参数,我这里只需要传id和改变的字段
          }).then(res => {
            if (res.data.type == "success") {
              this.$message.success(res.data.content);
              this.getList(); // 这个函数是获取表格信息的方法,相当于刷新table数据
            } else {
              this.$message({
                type: "error",
                message: res.data.content
              });
            }
          });
        },

     

    -----------------------------------------------------------------------------------

    这个是input框编辑的代码

    首先表头里需要添加 cell-dbclcik事件

       以下是代码:

    <el-table :data="tableData" border @cell-dblclick="cellDblClick">
        <el-table-column prop="name" label="名字">
            <template slot-scope="scope">
               <span v-if="!scope.row.isEditCell">{{scope.row.name}}</span>
               <el-input v-if="scope.row.isEditCell" 
                         :autofocus="true"
                         v-model="scope.row.name"                  
                         placeholder="请输入名字" 
                         @blur="cellBlur(可传参)"  //失去焦点事件
                ></el-input>
            </template>
         </el-table-column>
    </el-table>
    
    data(){
        return {
            tableData:[] //要渲染的表数据
        }
    }

     注意:input框是根据字段isEditCell的true/false来判断是否出现,如果后台传递过来的数据中没有,可以自己手动添加进去

        // 获取列表
        getTableList() {
          this.$axios
            .get('url')
            .then(res => {      
              var th = this
              th.tableData = res.data.data.rows;  // 渲染表数据
    
              // 遍历表数据,为每条数据添加isEditCell属性
              var length = th.tableData.length;
              for (var i = 0; i < length; i++) {
                th.tableData[i].isEditCell = false;
              }
              
            });
        },

     

    methods:{
         // 单元格双击事件
        cellDblClick(row, column, cell, event) {
          // 判断修改的字段名,我要修改name里的内容
          // column里有个属性叫property
          if (column.property == "name") {
            row.isEditCell = true; //input框出现,span消失
            this.onCellDblClickInput(event); //input框双击回调事件
          } 
        },
    
         // input框双击回调事件
         onCellDblClickInput(event) {
           //要等到input框渲染到页面后才能获取焦点
          this.$nextTick(function() {
            $(event.target).children().find("input").focus(); //获取input焦点
          });
        },
    
        // 编辑框失去焦点,即完成编辑
        cellBlur(row) {
          // 数据提交
          this.updateRow(可传参);
        },
    
        // 修改子表单元格事件,即失去焦点后,向后台发送请求
        updateRow(可传参) {
          var that = this;
          this.$axios.post({
            url: 'url'’,
            data:data
          }).then(res => {
            if (res.data.type == "success") {
              this.$message.success("修改成功!");
    
              // 成功就刷新表
              this.getTableList()
    
            } else {
              this.$message({
                type: "error",
                message: res.data.content
              });
            }
          });
        }
    }

    然后就可以啦,效果我就不展示啦

    其实有很多文章都写了这个功能,而且也比我的要完善很多。

    我主要是为了记录自己曾经的疑难点^_^,所以希望大家不要在意哈

    有问题欢迎指出=3=

    --------------------------------

    11.15代码完善

    发现原来写的代码搞复杂了,获取焦点事件可以直接通过ref来拿到,代码我这里重新贴上,原来的不删,作为对比

    这里新增了提交按钮和回车提交功能

    <el-table :data="tableData" border @cell-dblclick="cellDblClick">
        <el-table-column prop="name" label="名字">
            <template slot-scope="scope">
               <span v-if="!scope.row.isEditCell" style="cursor:pointer">{{scope.row.name}}
               </span>
               <el-input v-if="scope.row.isEditCell" :autofocus="true" 
                         v-model="scope.row.name" placeholder="请输入名字"
                        @keyup.enter.native="submitName(scope.row)" // 回车保存
                        @blur="cellBlur(scope.row,scope.column)"  //失去焦点事件
                        style="width:70%" ref="inputRef"></el-input>
                <el-button v-if="scope.row.isEditCell" type="success" icon="el-icon-check" size="mini" @click="submitName(scope.row)"></el-button>
            </template>
         </el-table-column>
    </el-table>
    
    
    // 获取列表
    getTableList() {
        this.$axios.get('url').then(res => {      
            var th = this
            th.tableData = res.data.data.rows;  // 渲染表数据
    
             // 遍历表数据,为每条数据添加isEditCell属性
             var length = th.tableData.length;
             for (var i = 0; i < length; i++) {
               th.tableData[i].isEditCell = false;
             }
              
        });
    },
    // 双击编辑
    cellDblClick(row,column) {
        if (column.property == "name") {
            this.$set(row, "isEditCell", true);
        }
        this.tableData= this.tableData.filter(item => {
          return item;
        }) //视图刷新
        this.$nextTick(() => {
          this.$refs.inputRef.focus(); // 视图出现后使input获取焦点
        })
    },
    
    // 可以编辑框失去焦点
    cellBlur(row, column) {
        row.isEditCell= false;
        this.$set(row, 'isEditCell', false);
        this.submitName(row)
    },
    
    // 提交
    submitName(row) {
        if (!row.name) {
            this.$message.warning('请填写内容!');
            return;
        }
        this.$axios.post(url,row).then(res=>{
            this.$message({
              type:res.data.type,
              message:res.data.content
           })
           this.queryTableData(); //刷新数据
        }).catch(e=>{})
    },

     

     

     

    展开全文
  • vue elementUI el-table 表格双击编辑

    万次阅读 2019-04-10 16:34:37
    //表格也可以写成原生的table <el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit"> <el-table-column property="order1" label="顺序"></el-tabl...
  • 每个属性的edit为false为不可编辑,为true是可编辑 输入可以是input、select、date-picker等等 代码: 页面: <template> <div> <el-table :data="tableData" border style="font-size: 12px
  • 如上图所示,双击行可以编辑编辑取消的时候,这一行恢复为编辑前的数据,这个地方用到对象的浅拷贝,点击取消的时候可以拿到这一行数据(row),通过以下方法实现: //双击编辑 cellClick(row) { this.$set...
  • element表格组件双击编辑问题记录 最近在开发vue-element表格时,有双击可编辑需求,现记录一下关键代码 html: data 给需要编辑的属性加上isEdit属性,并默认false 通过element表格的双击事件 修改对应的isEdit...
  • 之前已经实现了表格的新增、编辑和删除,在我的上篇文章中写的也比较详细。但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入。从代码上来说,代码量也较大;而且使用的是原生的...
  • 之前已经实现了表格的新增、编辑和删除,在我的上篇文章https://blog.csdn.net/wangjie919/article/details/81604599中写的也比较详细。但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行...
  • 之前已经实现了表格的新增、编辑和删除,在我的上篇文章中写的也比较详细。但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入。从代码上来说,代码量也较大;而且使用的是原生的...
  • 需求背景:鼠标双击编辑行内内容 实现思路:双击时获取到被点击的单元格元素,配合element内置方法,实现表单的显示与隐藏 当某表单内容显示时,自动获取光标,点击其他位置时表单会失去光标触发方法,其中一些方法...
  • Vue电子表格 项目设置 npm install 编译和热重装以进行开发 npm run dev 怎么运行的: 基本用法 您可以使用键盘上的箭头键来选择一个单元格,也可以直接单击它。 按空格键或双击一个单元格进行编辑。 您也可以在...
  • 然后点击鼠标右键,选择设置单元格格式选择自定义,并将原来的格式删除掉,输入两个*号,设置完成后,我们选中的数据就会被星号代替注意:双击表格,隐藏的数据是可以显示出来的,单击表格编辑栏中也可以看到数据2....
  • vxe-table vue 增删改查表格组件

    万次阅读 热门讨论 2019-01-26 19:49:40
    支持手动、单击、双击编辑模式 支持渲染简化的内置组件 支持渲染任意自定义组件 支持动态列渲染 支持数据校验(同步、异步) 支持显示列数据 change 状态 支持增/删/改/查/还原 支持原 ElTable 所有参数及...
  • 支持手动、单击、双击编辑模式 支持渲染简化的 ElementUI 组件 支持自定义渲染任意 Vue 组件 支持动态列渲染 支持(同步、异步)校验 支持显示单元格值的修改状态 支持增/删/改/查/还原 支持方向键和 Tab 键切换...
  • Vue + ElementUI 扩展的可编辑表格组件,完全支持任意组件渲染。实现功能:支持单列编辑支持整行编辑支持单击、双击编辑模式支持渲染任意组件支持动态列支持显示编辑状态支持增删改查数据获取支持还原更改数据支持 ...
  • 要求table页面直接点击表格就可以编辑关闭后可以保存 实现效果是点击(双击\单击)展示出输入框,鼠标离开后可以保存修改并还原成原来的样子 话不多说先展示点代码: <el-table-column v-for="(column,index) ...
  • TableInput.vue

    2020-07-16 22:18:46
    Vue+elementUI实现表格双击输入。双击表格实现编辑功能,失去焦点时保存。输入可以是文本输入,下拉框,日期选择等等,可以根据自己的需求添加
  • 1、双击进入编辑,输入文字,离开焦点完成输入,变成label 2、设置字体、设置居左、居右、居中、改变背景色、改变字体颜色、加粗等 3、通过拖拽调整表格和宽度和高度 4、选中多列、多行进行合并、拆分操作 5、...
  • 1.给td添加双击事件 @dblclick="edit(k,sub_k,$event)" ,此函数的作用是将k,sub_k用下滑线组装起来,并赋值给 editKey。 2.td的两个元素:input元素用v-show="editKey===k+'_'+sub_k" (默认是隐藏的);p元素...
  • 项目中遇到表格双击编辑编辑完场后保存进行判断不能为空,直接上代码 data(){ return{ hasBlock: false, } }, methods:{ //定义的方法 ifBlock() { //el-table中绑定的数组对象 this....
  • vue+element-ui 改写table2

    2021-04-07 13:34:33
    本文接上文,改写table实现编辑表格内容,当然后续还会有更方便的写法 提示:以下是本篇文章正文内容,下面案例可供参考。建议复制粘贴后,可以直接使用,然后根据代码,去找element-ui中对应的属性或者事件,自己...
  • 需要双击表格的表头切换到编辑表头文本的模式。众所周知eltable没有暴露表头的插槽,我们想定制表头几乎不可能。我想过两种方案: 扩展eltable,使其支持表头插槽 拦截表头单击事件,触发双击事件 第一种显然是最...
  • HBuilderX.2.2.2.20190816.zip

    2019-08-23 22:28:52
    轻巧、极速 ...HX是唯一一个新建文件默认类型是markdown的编辑器,也是对md支持最强的编辑器,你甚至可以直接粘贴表格、图片进来。对于技术人员,我们强烈建议你以后不要使用记事本了,用markdown来替代txt。

空空如也

空空如也

1 2
收藏数 29
精华内容 11
关键字:

vue双击编辑表格

vue 订阅