当前位置：移动技术网 > IT编程>脚本编程>vue.js > 优雅的elementUI table单元格可编辑实现方法详解

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

2019年05月29日 | 移动技术网IT编程 | 我要评论

狂龙惊艳,平顶山新闻,诱人的恶魔之吻漫画

最近在做可编辑特定列的单元格的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>

github:

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

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:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Vue的全局过滤器和私有过滤器的实现

vue允许自定义过滤器可被用作一些常见的文本格式化过滤器可以用在两个地方：mustache插值表达式和 v-bind表达式过滤器应被添加在javascrip... [阅读全文]
VUE+elementui组件在table-cell单元格中绘制微型echarts图

需求效果图示例实际完成效果图**代码实现注：table表格为二次封装的子组件-在table表格中根据 scope.$index动态设置元素的id ，便于指定单... [阅读全文]
如何修改Vue打包后文件的接口地址配置的方法

1、背景常规的vue项目分为本地环境和生产环境，我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最... [阅读全文]
谈谈我在vue-cli3中用预渲染遇到的坑

前言在开发自己的个人网站的时候后，选择了用vue来开发，不可避免的遇到要对seo做优化。鉴于目前页面也不多，因此首先采用的是预渲染的方式。本来以为把插件一装，配... [阅读全文]
vue项目打包之开发环境和部署环境的实现

项目开发阶段和生产环境可能不一样如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，api 返回的也都是假数据，等后台接口开发好后，再切换成后台... [阅读全文]
浅谈vue权限管理实现及流程

一、整体思路后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addroutes ... [阅读全文]
Vue通过getAction的finally来最大程度避免影响主数据呈现问题

企业信息列表，查看某条记录时，弹窗页里要求展示企业的用户名，而用户名字段不在企业表里。为此，我们需要修改弹窗页的渲染方法。methods: { enterpri... [阅读全文]
基于Vue实现微前端的示例代码

前端微服务化一直是前端社区的一个热门话题，早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓，个人认为基于web co... [阅读全文]
vue中使用带隐藏文本信息的图片、图片水印的方法

一.带隐藏文本信息的图片通过rgb 分量值的小量变动，不影响对图片的识别。因此，我们可以在图片加入文字信息。最终达到如下效果:首先，在该组件中加入img用于显示... [阅读全文]
vue 路由懒加载中给 Webpack Chunks 命名的方法

最早的路由定义方式import vue from 'vue'import vuerouter from 'vue-router'import home from... [阅读全文]

网友评论


验证码：

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

2019年05月29日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论