问题描述:
上一篇文章实现了 表格可编辑功能,但是编辑的话是整行都变成可编辑状态,想要实现单独单元的编辑
通过网上查找,找到大佬封装的代码借鉴一下,侵权请联系
代码:
封装的 EditableCell.vue
<template> <div @dblclick="onFieldClick" class="edit-cell"> <div v-if="!editMode && !showInput" tabindex="0" class="cell-content" :class="{ 'edit-enabled-cell': canEdit }" @keyup.enter="onFieldClick" > <slot name="content"></slot> </div> <component :is="editableComponent" v-if="editMode || showInput" ref="input" @focus="onFieldClick" @keyup.enter.native="onInputExit" v-on="listeners" v-bind="$attrs" v-model="model" > <slot name="edit-component-slot"></slot> </component> </div> </template> <script> export default { name: "editable-cell", inheritAttrs: false, props: { value: { type: [String, Number], default: "", }, toolTipContent: { type: String, default: "Click to edit", }, toolTipDelay: { type: Number, default: 500, }, toolTipPlacement: { type: String, default: "top-start", }, showInput: { type: Boolean, default: false, }, editableComponent: { type: String, default: "el-input", }, closeEvent: { type: String, default: "blur", }, canEdit: { type: Boolean, default: false, }, }, data() { return { editMode: false, }; }, computed: { model: { get() { return this.value; }, set(val) { this.$emit("input", val); }, }, listeners() { return { [this.closeEvent]: this.onInputExit, ...this.$listeners, }; }, }, methods: { onFieldClick() { if (this.canEdit) { this.editMode = true; this.$nextTick(() => { let inputRef = this.$refs.input; if (inputRef && inputRef.focus) { inputRef.focus(); } }); } }, onInputExit() { this.editMode = false; }, onInputChange(val) { this.$emit("input", val); }, }, }; </script> <style lang="scss" scope> .cell-content { min-height: 40px; padding-left: 5px; padding-top: 10px; border: 1px solid transparent; } .edit-cell { .el-input__inner { height: 66px; line-height: 66px; font-size: 22px; color: #202020; } } </style>
table 组件调用该组件
<el-table :key="key" :data="temTableData.tableData" :span-method="isMerge ? objectSpanMethod : objectKong" border style=" width: 100%; background: transparent; border-left: 1px solid !important; border-top: 1px solid !important; " :style="$_methods.setStyle(tempTabStyle)" class="source table" :header-cell-style="$_methods.setStyle(tempHederStyle)" :cell-style="$_methods.setStyle(tempTableStyle)" > <template v-for="(item, index) in temTableData.keyList"> <el-table-column :key="index" :prop="item" :label="temTableData.headerTable[index]" > <template #header> <editable-cell v-if="routerFlag" :can-edit="editModeEnabled" v-model="temTableData.headerTable[index]" > <span slot="content">{{ temTableData.headerTable[index] }}</span> </editable-cell> <span v-else>{{ temTableData.headerTable[index] }}</span> </template> <editable-cell v-if="routerFlag" slot-scope="{ row }" :can-edit="editModeEnabled" v-model="row[temTableData.keyList[index]]" > <span slot="content">{{ row[temTableData.keyList[index]] }}</span> </editable-cell> <span v-else>{{ row[temTableData.keyList[index]] }}</span> </el-table-column> </template> </el-table> import EditableCell from "../../components/EditableCell.vue"; components: { EditableCell, },
效果图: