首页
所有分类
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 相关文章推荐
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
原生js编写焦点图效果
Dec 08 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
原生js实现弹幕效果
Nov 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
嘧啶碱基(2) RNA(2) 美国航天局(1) 毅力号(1) NASA(1) 陨石(1) 火星(2) 富碳陨石(1) 数据(1) 大脑(1)
You might like
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php一些公用函数的集合
2008/03/27 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
轻松创建nodejs服务器（5）：事件处理程序
2014/12/18 NodeJs
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
javascript this详细介绍
2016/09/19 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
vue.js移动端app实战1：初始配置详解
2017/07/24 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
2018/05/03 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
浅析python打包工具distutils、setuptools
2018/04/20 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
博柏利美国官方网站：Burberry美国
2020/11/19 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
网页美工求职信
2014/02/15 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Redis RDB技术底层原理详解
2021/09/04 Redis