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

最新推荐文章于 2023-08-21 22:20:03 发布
最新推荐文章于 2023-08-21 22:20:03 发布
阅读量4.1k 收藏 6
点赞数 1
文章标签： javascript ui c# ViewUI
原文链接：https://segmentfault.com/a/1190000017481742
版权

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

先上效果：
图片描述

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>

在线查看（可能需要科学上网）：https://codesandbox.io/s/2pv1...
github:https://github.com/heianxing/...

另外一个单元格编辑的例子：
图片描述

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>

在线查看（可能需要科学上网）：https://codesandbox.io/s/mrqq...
github:https://github.com/heianxing/...

英文来源：https://www.reddit.com/r/vuej...

weixin_34234823
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+element-ui可编辑table
cs_07030404_dn的博客
06-07 317
通过一个数组记录编辑状态（也可以是绑定数据的某个属性，如果是多列可编辑，你可能需要多个数组或者属性），双击单元格，编辑状态设置为true，切换显示的文本内容为input输入框，当input输入框失去焦点时，保存数据，编辑状态设置为false。定义单元格的双击事件：@cell-dblclick="handleCellDblclick"通过绑定数据的一个属性，记录当前行的编辑状态。当点击编辑按钮时，编辑状态设置为true。1、双击单元格，编辑当前单元格。2、点击编辑按钮，编辑整行。
vue+Element中table表格实现可编辑（select下拉框）
10-15
主要介绍了vue+Element中table表格实现可编辑，实现select下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
优雅的elementUI table单元格可编辑实现方法详解
10-17
主要介绍了优雅的elementUI table单元格可编辑实现方法详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
el-table 实现单元格内编辑功能
weixin_46677214的博客
11-22 6869
el-table 实现单元格内编辑功能 功能 双击单元格出现编辑框，编辑框失去焦点后保存内容。 原理 通过v-if控制编辑框与显示值显示和隐藏。 通过el-table 组件·的cell-dblclick事件，得到row、column的数据，并且显示编辑框，隐藏显示值。 通过el-input组件的blur隐藏编辑框。 步骤 1.显示编辑框，聚焦编辑框 显示编辑框 column.property是当前的template中el-table-column所填写的property值 row[column.
element-ui的table表中数据可编辑
热门推荐
zeng092210的博客
06-10 1万+
先看效果 html结构代码 <el-table :data="tableData" highlight-current-row border :height='tableHeight'> <el-table-column prop="info.url" label="通道名称" align="center" class="compileNameFather" wid...
TableEdit UI
IOS_IPhones的博客
09-29 307
1、tableView的编辑的步骤：  1.让tableView处于编辑状态,(默认所有的cell都处于编辑状态，默认下的编辑样式是删除)  2.设置哪些cell可以编辑  3.设置编辑的样式(删除，插入)  4.提交编辑结果(先修改数据源，再修改UI)  tableView的移动的步骤：  1.让tableView处于编辑状态  2.设置哪些cell可以移动  3.提
Element-UI中关于table表格的那些骚操作(小结)
10-16
主要介绍了Element-UI中关于table表格的那些骚操作(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element-ui 表格实现单元格可编辑的示例
12-29
如下所示： ... <el data=tableData cell-mouse-enter=handleMouseEnter cell-mouse-leave=handleMouseOut xss=removed> 日期 width=180> !scope.row.editFlag>{{ scope.row.name }} <span v-if
Inline Edit
weixin_30564901的博客
07-31 151
https://help.salesforce.com/articleView?id=000326139&type=1&mode=1 Inline Edit可以在UserInterface中进行全局控制，也可以通过重写Edit按钮来达到Disable的目的。 转载于:https://www.cnblogs.com/resetsuna/p/11277090.htm...
vue+elementUi+table实现单元格可输入功能、String、slice、Time、FullYear、Month、Date、Hours、Minutes、Seconds
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
07-13 3848
vue+elementUi+table实现单元格可输入功能、String、slice、Time、FullYear、Month、Date、Hours、Minutes、Seconds
html表格行内编辑器,表格编辑制作软件——TableEdit
weixin_30938397的博客
06-10 876
原标题：表格编辑制作软件——TableEditTableEdit for mac是专门设计了一个简单，干净，优雅的电子表格应用程序为OS X TableEdit设有简约而直观的界面，TableEdit for mac并具有方便的功能，如功能和无缝CSV导入/导出，以及详尽的单元格样式选项。TableEdit for mac软件资源分享：https://www.macdown.com/mac/437...
edittable插件，可编辑表格示例
05-16
edittable插件，可编辑表格示例，基于jQuery实现的EditTable可编辑表格插件
如何在element-ui的table实现输入
最新发布
AlgorithmHero的博客
08-21 1441
首先，确保你已经引入了 Element UI 的库和样式文件。来双向绑定输入框的值。这样，每一行的输入框都可以独立地与对应行的数据进行交互。来自定义 "Input Column" 这一列的内容。对象提供了对当前行数据的访问，我们使用。在上面的代码中，我们使用了。
简单实现 table编辑、添加和删除操作
冒烟筒的博客
11-11 448
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
基于ant.design4.3.1实现table的编辑
吃瓜群众的博客
06-04 924
实现效果如图所示 import React, { useState } from "react"; import { Table, Input, InputNumber } from 'antd' import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons"; import styles from './style.less' interface TableFromListItem { key: numb.
双击table表格进行输入框表格编辑
weixin_43945122的博客
04-12 953
== @cell-dblclick=“tableEdit”== <el-table :data="tableData" height="95%" border @cell-dblclick="tableEdit" @click="clickTd" :highlight-current-row="false" style="wid
layui的tableEdit扩展支持动态获取数据
池塘
01-13 1789
tableEdit layui table edit编辑功能 提交详情
Demo-写一个单元格可编辑的table
weibingbing_net的专栏
05-08 487
Angular学习笔记39：Demo-写一个单元格可编辑的table 写一个单元格可编辑的table的Demo 需求分析 现在需要做一个table，其中的单元格式可以编辑的，当用户点击单元格的input的时候，就可以编辑了，然后点击input之外的地方，就将这个input置为disabled。从而不可编辑。 先新建一个组件 wujiayudeMacBook-Pro:demo-test w...
layui表格内使用edit属性修改行内容
m0_69439101的博客
04-20 4619
回调函数返回一个object参数。
elementui可编辑单元格_ElementUI 表格可编辑单元格
05-25
ElementUI的表格组件中，可以通过设置 `:editable="true"` 来开启单元格的可编辑模式。当单元格进入编辑模式时，会显示一个输入框，用户可以在输入框中修改单元格内容。用户完成编辑后，可以通过点击外部区域或按下...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值