目錄

• 實現效果
• 實現程式碼

最近由於公司開始使用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.suqTnivcxSIG
 
ffix}}</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);
    },/**
     * @param {event} event
     * 丟失焦點關閉編輯狀態，並儲存資料
     */
    loseFocus(event) {
      let value = this.formatData(event.target.value);
      this.editData(value);
 http://www.cppcns.com
 
     this.closeEditStatus(value);
      this.afterEdit(value);
    },/**
     * 釋出input事件修改資料
     * @param value
     */
    editData(value) {
      this.$emit("input",value);
    },/**
     * 關閉編輯狀態
     * @param 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 為表頭資料中欄位，相當於 展示表頭http://www.cppcns.com 老師對應的 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>

到此http://www.cppcns.com這篇關於element-ui直接在表格中點選單元格編輯的文章就介紹到這了,更多相關element 單元格編輯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！