iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >element-ui直接在表格中点击单元格编辑
  • 261
分享到

element-ui直接在表格中点击单元格编辑

2024-04-02 19:04:59 261人浏览 八月长安
摘要

目录实现效果实现代码最近由于公司开始使用elementUI,开发的过程中需要用到对表格的单元格进行编辑,下面是我自己实现表格可编辑的方式,感兴趣的可以了解一下 实现效果 编辑之后对

最近由于公司开始使用elementUI,开发的过程中需要用到对表格的单元格进行编辑,下面是我自己实现表格可编辑的方式,感兴趣的可以了解一下

实现效果

在这里插入图片描述

编辑之后对应表格数据该字段值也就发生了变化,控制台输出所有数据即可查看变化

实现代码

1、自定义编辑组件


<template>
  <div class="editCell">
    <div class="canEdit" v-if="CanEdit" @click="beginEdit">
      <label v-show="!editStatus">
        <span v-if="this.value!== null && this.value !== undefined && this.value !== ''">{{ value }}{{this.suffix}}</span>
        <span v-else style="padding-left: 100%;padding-top: 100%;"/>
      </label>
      <label v-show="editStatus">
        <input
          type="text"
          class="inputClass"
          ref="input"
          v-on:keyup.13="loseFocus"
          :value="value"
          @blur="loseFocus"
        />
      </label>
    </div>

    <label class="cannotEdit" v-else>
      <span>{{ value }}{{ suffix }}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "EditCell",
  props: {
    
    value: {
      required: true
    },
    
    CanEdit: {
      type: Boolean,
      default: true
    },
    
    fORMatData: {
      type: Function,
      default: value => {
        return value;
      }
    },
    
    afterEdit: {
      type: Function,
      default: () => {}
    },
    
    initFormat: {
      type: Boolean,
      default: false
    },
    suffix: {
      default: ""
    }
  },
  data() {
    return {
      editStatus: false,
      showData: "",
      defaultData: "",
      timeout: null
    };
  },
  methods: {
    
    beginEdit() {
      this.editStatus = true;
      setTimeout(() => {
        this.$refs.input.focus();
      }, 1);
    },

    
    loseFocus(event) {
      let value = this.formatData(event.target.value);
      this.editData(value);
      this.closeEditStatus(value);
      this.afterEdit(value);
    },

    
    editData(value) {
      this.$emit("input", value);
    },

    
    closeEditStatus(value) {
      this.editStatus = false;
    },
    
    initData() {
      let newValue = this.formatData(this.value);
      this.$emit("input", newValue);
    }
  },
  mounted() {
    if (this.initFormat) {
      this.initData();
    }
  },
  watch: {
    'value': function(newVal){
      this.$emit("input", this.formatData(newVal));
    }
  }
};
</script>

<style scoped>
.editCell {
  height: 100%;
  width: 100%;
}
.inputClass {
  height: 30px;
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 30px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  overflow: visible;
  touch-action: manipulation;
  margin: 0;
}
</style>

页面调用


import EditCell from "@/components/EditCell/EditCell";
components: { EditCell},

 <el-table-column
    v-for="item in tableColumn"
      :prop="item.dataindex"
      :label="item.title"
      :width="item.width"
      :align="item.align"
      :key="item.id"
      :fixed="item.fixed"
  >
  	  //此处调用自定义组件(dataIndex 为表头数据中字段,相当于 展示表头 老师对应的 teacher名称)
      <template slot-scope="scope">
          <span v-if="item.dataIndex !== 'batchInvest' && item.dataIndex !== 'remark'">{{scope.row[item.dataIndex]}}</span>
          // 若需要格式化数据 可设置 :format-data="formatFun" formatFun此方法在当前页methods中定义即可
          <edit-cell v-else v-model="scope.row[item.dataIndex]" :can-edit="true"/>
      </template>
      <el-table-column
          v-for="item2 in item.children"
          :prop="item2.dataIndex"
          :label="item2.title"
          :width="item2.width"
          :align="item2.align"
          :key="item2.id"
          :fixed="item2.fixed"
      >
      </el-table-column>
  </el-table-column>

到此这篇关于element-ui直接在表格中点击单元格编辑的文章就介绍到这了,更多相关element 单元格编辑内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: element-ui直接在表格中点击单元格编辑

本文链接: https://www.lsjlt.com/news/159307.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作