首页
所有分类
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 相关文章推荐
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
基于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
电台频率(32) 保养(1) 广播(8) 中学科技(1) 长波(3) 下载(1) 怀旧期刊(1) 短波(8) 收音机(62) 无线电(12)
You might like
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
Python自定义简单图轴简单实例
2018/01/08 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python实现图片插入文字
2019/11/26 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
意大利会呼吸的鞋：Geox健乐士
2017/02/12 全球购物
六一亲子活动总结
2014/07/01 职场文书
党员民主评议总结
2014/10/20 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
目标责任书格式范文
2015/05/11 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang
Python读取和写入Excel数据
2022/04/20 Python