首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

优雅的elementUI table单元格可编辑实现方法详解

Posted in Javascript onDecember 23, 2018

最近在做可编辑特定列的单元格的elementUI table，看了N多的开源、文章，找到一个很优雅的实现方式，分享给大家。
PS:单元格可编辑的table，用英文搜索：Inline editable table with ElementUI 会得到高质量结果。

先上效果：

优雅的elementUI table单元格可编辑实现方法详解

APP.vue：

<template>
 <div id="app">
   <div style="margin-bottom: 30px">
    <el-switch
      style="display: block"
      v-model="editModeEnabled"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="Edit enabled"
      inactive-text="Edit disabled">
     </el-switch>
   </div>
    <el-table
   :data="gridData"
   style="width: 100%">
   <el-table-column
    label="Name"
    min-width="180">
    <editable-cell slot-scope="{row}"
            :can-edit="editModeEnabled"
            v-model="row.name">
     <span slot="content">{{row.name}}</span>
    </editable-cell>
   </el-table-column>

   <el-table-column
    min-wwidth="150"
    label="Gender">

     <editable-cell 
     slot-scope="{row}" 
     editable-component="el-select"
     :can-edit="editModeEnabled"
     close-event="change"
     v-model="row.gender">
     
     <el-tag size="medium" 
         :type="row.gender === 'M' ? 'primary' : 'danger'" 
         slot="content">
         {{row.gender === 'M' ? 'Male': 'Female'}}
     </el-tag>

     <template slot="edit-component-slot">
      <el-option value="M" label="Male"></el-option>
      <el-option value="F" label="Female"></el-option>
     </template>
    </editable-cell>
    
   </el-table-column>


   <el-table-column
    label="Birth Date"
    min-width="250">
     <editable-cell 
     slot-scope="{row}" 
     :can-edit="editModeEnabled"
     editable-component="el-date-picker"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     v-model="row.date">
     <span slot="content">{{row.date}}</span>
    </editable-cell>
   </el-table-column>
  </el-table>
 </div>
</template>

<script>
import EditableCell from "./components/EditableCell.vue";

export default {
 name: "App",
 components: {
  EditableCell
 },
 data() {
  return {
   editModeEnabled: false,
   gridData: [
    {
     date: "2016-05-03",
     name: "Tom",
     gender: "M"
    },
    {
     date: "2016-05-02",
     name: "Lisa",
     gender: "F"
    },
    {
     date: "2016-05-04",
     name: "Jon",
     gender: "M"
    },
    {
     date: "2016-05-01",
     name: "Mary",
     gender: "F"
    }
   ]
  };
 }
};
</script>

<style>
.edit-cell {
 min-height: 35px;
 cursor: pointer;
}
</style>

EditeableCell.vue:

<template>
 <div @click="onFieldClick" class="edit-cell">
  <el-tooltip v-if="!editMode && !showInput"
        :placement="toolTipPlacement"
        :open-delay="toolTipDelay"
        :content="toolTipContent">
   <div tabindex="0" 
      class="cell-content"
      :class="{'edit-enabled-cell': canEdit}"
      @keyup.enter="onFieldClick">
    <slot name="content"></slot>
   </div>

  </el-tooltip>
  <component :is="editableComponent"
        v-if="editMode || showInput"
       ref="input"
       @focus="onFieldClick"
       @keyup.enter.native="onInputExit"
       v-on="listeners"
       v-bind="$attrs"
       v-model="model">
    <slot name="edit-component-slot"></slot>
  </component>
 </div>
</template>
<script>
export default {
 name: "editable-cell",
 inheritAttrs: false,
 props: {
  value: {
   type: String,
   default: ""
  },
  toolTipContent: {
   type: String,
   default: "Click to edit"
  },
  toolTipDelay: {
   type: Number,
   default: 500
  },
  toolTipPlacement: {
   type: String,
   default: "top-start"
  },
  showInput: {
   type: Boolean,
   default: false
  },
  editableComponent: {
   type: String,
   default: "el-input"
  },
  closeEvent: {
   type: String,
   default: "blur"
  },
  canEdit: {
   type: Boolean,
   default: false
  }
 },
 data() {
  return {
   editMode: false
  };
 },
 computed: {
  model: {
   get() {
    return this.value;
   },
   set(val) {
    this.$emit("input", val);
   }
  },
  listeners() {
   return {
    [this.closeEvent]: this.onInputExit,
    ...this.$listeners
   };
  }
 },
 methods: {
  onFieldClick() {
   if (this.canEdit) {
    this.editMode = true;
    this.$nextTick(() => {
     let inputRef = this.$refs.input;
     if (inputRef && inputRef.focus) {
      inputRef.focus();
     }
    });
   }
  },
  onInputExit() {
   this.editMode = false;
  },
  onInputChange(val) {
   this.$emit("input", val);
  }
 }
};
</script>
<style>
.cell-content {
 min-height: 40px;
 padding-left: 5px;
 padding-top: 5px;
 border: 1px solid transparent;
}
.edit-enabled-cell {
 border: 1px dashed #409eff;
}
</style>

github:https://github.com/heianxing/editable-table-idea-vue-element

另外一个单元格编辑的例子：

优雅的elementUI table单元格可编辑实现方法详解

App.vue：

<template>
 <div id="app">
   <el-tooltip content="Click on any of the cells or on the edit button to edit content">
    <i class="el-icon-info"></i>
   </el-tooltip>
    <el-table
   :data="gridData"
   style="width: 100%">

    <el-table-column
    label="Operations"
    min-width="180">
    <template slot-scope="{row, index}">
     <el-button icon="el-icon-edit"
     @click="setEditMode(row, index)">
    </el-button>
     <el-button type="success" icon="el-icon-check"
     @click="saveRow(row, index)">
    </el-button>
    </template>
   </el-table-column>


   <el-table-column
    label="Name"
    min-width="180">
    <editable-cell :show-input="row.editMode" slot-scope="{row}" v-model="row.name">
     <span slot="content">{{row.name}}</span>
    </editable-cell>
   </el-table-column>

   <el-table-column
    min-wwidth="150"
    label="Gender">

     <editable-cell 
     :show-input="row.editMode"
     slot-scope="{row}" 
     editable-component="el-select"
     close-event="change"
     v-model="row.gender">
     
     <el-tag size="medium" 
         :type="row.gender === 'M' ? 'primary' : 'danger'" 
         slot="content">
         {{row.gender === 'M' ? 'Male': 'Female'}}
     </el-tag>

     <template slot="edit-component-slot">
      <el-option value="M" label="Male"></el-option>
      <el-option value="F" label="Female"></el-option>
     </template>
    </editable-cell>
    
   </el-table-column>


   <el-table-column
    label="Birth Date"
    min-width="250">
     <editable-cell 
     :show-input="row.editMode"
     slot-scope="{row}" 
     editable-component="el-date-picker"
     format="yyyy-MM-dd"
     value-format="yyyy-MM-dd"
     v-model="row.date">
     <span slot="content">{{row.date}}</span>
    </editable-cell>
   </el-table-column>
  </el-table>
 </div>
</template>

<script>
import EditableCell from "./components/EditableCell.vue";

export default {
 name: "App",
 components: {
  EditableCell
 },
 data() {
  return {
   gridData: [
    {
     date: "2016-05-03",
     name: "Tom",
     gender: "M"
    },
    {
     date: "2016-05-02",
     name: "Lisa",
     gender: "F"
    },
    {
     date: "2016-05-04",
     name: "Jon",
     gender: "M"
    },
    {
     date: "2016-05-01",
     name: "Mary",
     gender: "F"
    }
   ]
  };
 },
 methods: {
  setEditMode(row, index) {
   row.editMode = true;
  },
  saveRow(row, index) {
   row.editMode = false;
  }
 },
 mounted() {
  this.gridData = this.gridData.map(row => {
   return {
    ...row,
    editMode: false
   };
  });
 }
};
</script>

<style>
.edit-cell {
 min-height: 35px;
 cursor: pointer;
}
</style>

EditeableCell.vue：

<template>
 <div @click="onFieldClick" class="edit-cell">
  <el-tooltip v-if="!editMode && !showInput"
        :placement="toolTipPlacement"
        :open-delay="toolTipDelay"
        :content="toolTipContent">
   <div tabindex="0" @keyup.enter="onFieldClick">
    <slot name="content"></slot>
   </div>

  </el-tooltip>
  <component :is="editableComponent"
        v-if="editMode || showInput"
       ref="input"
       @focus="onFieldClick"
       @keyup.enter.native="onInputExit"
       v-on="listeners"
       v-bind="$attrs"
       v-model="model">
    <slot name="edit-component-slot"></slot>
  </component>
 </div>
</template>
<script>
export default {
 name: "editable-cell",
 inheritAttrs: false,
 props: {
  value: {
   type: String,
   default: ""
  },
  toolTipContent: {
   type: String,
   default: "Click to edit"
  },
  toolTipDelay: {
   type: Number,
   default: 500
  },
  toolTipPlacement: {
   type: String,
   default: "top-start"
  },
  showInput: {
   type: Boolean,
   default: false
  },
  editableComponent: {
   type: String,
   default: "el-input"
  },
  closeEvent: {
   type: String,
   default: "blur"
  }
 },
 data() {
  return {
   editMode: false
  };
 },
 computed: {
  model: {
   get() {
    return this.value;
   },
   set(val) {
    this.$emit("input", val);
   }
  },
  listeners() {
   return {
    [this.closeEvent]: this.onInputExit,
    ...this.$listeners
   };
  }
 },
 methods: {
  onFieldClick() {
   this.editMode = true;
   this.$nextTick(() => {
    let inputRef = this.$refs.input;
    if (inputRef) {
     inputRef.focus();
    }
   });
  },
  onInputExit() {
   this.editMode = false;
  },
  onInputChange(val) {
   this.$emit("input", val);
  }
 }
};
</script>
<style>

</style>

github:https://github.com/heianxing/editable-table-component-vue-element

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

优雅的elementUI table单元格可编辑实现方法详解

- Author -

flyingsky

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）
Dec 28 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
vue组件中的数据传递方法
May 14 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 #Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 #Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
JavaScript时间日期操作实例小结【5个示例】
Dec 22 #Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 #Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 #Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 #Javascript
艾尔登法环(1) 我的世界(1) 战锤40K(1) 暴雪(1) LOL(1) 遗弃(1) 小缇娜的奇幻之地(1) 最终幻想(1) 东方异文石(1) 巫师(1)
You might like
PHP操作文件方法问答
2007/03/16 PHP
PHP中10个不常见却非常有用的函数
2010/03/21 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
Javascript MD4
2006/12/20 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
jQuery 1.9.1源码分析系列（十三）之位置大小操作
2015/12/02 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Python 使用office365邮箱的示例
2020/10/29 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
日本最大美瞳直送网：Morecontact（中文）
2019/04/03 全球购物
Derek Rose官网：英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
公司活动方案范文
2014/03/06 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
AngularJS实现多级下拉框
2022/03/25 Javascript