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

这篇文章主要为大家展示了“element-ui如何直接在表格中点击单元格编辑”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“element-ui如何直接在表格中点击单元格编辑”这篇文章吧。

实现效果

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

实现代码

自定义编辑组件

<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 />      </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如何直接在表格中点击单元格编辑”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！