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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<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);
    },

    /**
     * @param {event} event
     * 丢失焦点关闭编辑状态，并保存数据
     */
    loseFocus(event) {
      let value = this.formatData(event.target.value);
      this.editData(value);
      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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>