element-ui直接在表格中點擊單元格編輯
最近由於公司開始使用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); }, /** * @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>
頁面調用
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 單元格編輯內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- element el-table表格的二次封裝實現(附表格高度自適應)
- element 表格多級表頭子列固定的實現
- Element實現動態表格的示例代碼
- vue+element table表格實現動態列篩選的示例代碼
- 如何在vue中使用jsx語法