首页
所有分类
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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
js快速排序的实现代码
Dec 08 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
vant实现购物车功能
Jun 29 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
Rewrite(4) destoon(1)  AD域(1) nginx(76) Windows server 2012(17) lnmp(1) Centos(8) 伪静态(1) 日志格式分析(1) 组策略(1)
You might like
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
基于JavaScript的操作系统你听说过吗？
2016/01/28 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Python flask框架post接口调用示例
2019/07/03 Python
python requests证书问题解决
2019/09/05 Python
python将图片转base64,实现前端显示
2020/01/09 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
质量工程师岗位职责
2013/11/16 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
好学生评语大全
2014/05/05 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript