使用ElementUI中的el-table制作可编辑的表格

本文章已经生成可运行项目,

在前端开发时,可能会需要用到可编辑的表格控件。一些原生的UI框架并不支持Table控件的可编辑功能,所以只能自己实现。

以下用Vue3+Element-Plus进行示例开发。

一、实现可编辑的单元格

我想要实现的效果是,鼠标移动到el-table的某行时,该行呈现可编辑效果。所以需要用到Table事件中的cell-mouse-entercell-mouse-leave。当鼠标移入时,将该行数据源编辑状态字段置为true,相应的单元格模板借助v-if绑定呈现出可编辑状态;鼠标移出时,再将状态字段置为false,隐藏编辑状态模板。

完整代码如下:

<template>
    <div>
        <el-table :data="dataList" @cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave">
            <el-table-column type="index" width="50" />
            <el-table-column label="名称" prop="name" width="120">
                <template #default="scope">
                    <el-input v-if="scope.row.isEdit" class="cell-input" v-model="scope.row.name" />
                </template>
            </el-table-column>
            <el-table-column label="类型" prop="type" width="150">
                <template #default="scope">
                    <el-select v-if="scope.row.isEdit" class="cell-select" v-model="scope.row.type" placeholder="请选择">
                        <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="值" prop="value" width="150" />
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

interface TempData {
    name: string,
    type: string,
    value: string,
    isEdit: boolean
}

const TypeOptions = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    }
]

const dataList = reactive<TempData[]>([
    {
        name: '张三',
        type: 'Option1',
        value: 'value',
        isEdit: false
    },
    {
        name: '李四',
        type: 'Option2',
        value: 'value',
        isEdit: false
    },
    {
        name: '王五',
        type: 'Option3',
        value: 'value',
        isEdit: false
    }
])

const handleCellEnter = (row: any, column: any, cell: any, event: any) => {
    row.isEdit = true
}

const handleCellLeave = (row: any, column: any, cell: any, event: any) => {
    row.isEdit = false
}
</script>
<style scoped>
.cell-input {
    height: 26px;
    margin-left: -10px;
}

:deep(.cell-select .el-select__wrapper) {
    height: 26px;
    min-height: 26px;
    margin-left: -11px;
}

:deep(.el-table .el-table__row) {
  height: 50px;
}
</style>

(说明:以上代码示例中,对编辑状态下的el-inputel-select样式进行了处理,使鼠标移入移出时不会出现明显的错位现象)

二、解决el-select下拉内容无法选择问题

通常el-select的下拉框会超出所在行的范围,因此当鼠标准备选择下拉框内容时,会因超出行的范围而触发取消编辑状态,el-select就会消失,这样一来永远无法选中下拉选项。

解决的方法便是记录el-select的状态,如果是下拉状态,则el-table的鼠标事件不要触发行状态更改。变更部分代码如下:

let canUpdateEditingState = false

const handleOptionVisibleChange = (isVisible: boolean, row: any) => {
    canUpdateEditingState = isVisible
    if (!isVisible) {
        row.isEdit = false
    }
}

const handleCellEnter = (row: any, column: any, cell: any, event: any) => {
    if (canUpdateEditingState) return
    row.isEdit = true
}

const handleCellLeave = (row: any, column: any, cell: any, event: any) => {
    if (canUpdateEditingState) return
    row.isEdit = false
}

然后给el-select绑定事件方法如下:

@visible-change="(arg: any) => handleOptionVisibleChange(arg, scope.row)"

三、解决el-input无法使用中文输入法的问题

由于输入中文时,输入法弹框也会触发el-tablecell-mouse-leave事件,导致刚打出字符,单元格的编辑状态便取消了。这就需要借助compositionstartcompositionend事件来屏蔽中文输入过程。原理和第二点类似,补充代码如下:

const handleCompositionStart = () => {
    canUpdateEditingState = true
}

const handleCompositionEnd = () => {
    canUpdateEditingState = false
}

给el-table增加事件绑定:

@compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd"

2025.1.7 更新

关于第一点“实现可编辑的单元格”,使用Cell相关事件会响应过于频繁,性能很差。故本人后来改为了在row-click事件中将行置为可编辑状态,并取消其他行的编辑状态。

本文章已经生成可运行项目
el-tableElementUI 中的一个表格组件,如果想要实现可编辑功能,可以使用以下两种方式: 1. 使用 el-editable-table 组件 el-editable-table 组件是 ElementUI 中专门为表格编辑而设计的组件,可以轻松实现单元格编辑、行编辑和批量编辑等功能。 使用方法如下: 首先需要在页面中引入 el-editable-table 组件: ``` import ElEditableTable from 'el-editable-table' Vue.use(ElEditableTable) ``` 然后在 el-table 标签中使用 el-editable-table 组件即可: ``` <el-editable-table :data="tableData"> <el-table-column prop="name" label="姓名" :editable="true"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true"></el-table-column> <el-table-column prop="sex" label="性别" :editable="true"></el-table-column> </el-editable-table> ``` 2. 自行编写编辑功能代码 如果不想使用 el-editable-table 组件,也可以自行编写代码实现表格编辑功能。具体实现方法如下: 首先在 el-table 标签中添加 :highlight-current-row="true" 属性,这样可以高亮当前行。 然后在 el-table-column 标签中添加 scoped-slot="default" 属性,用于自定义单元格内容。 接着在 methods 中添加 edit 方法,用于切换单元格为编辑状态。 最后在模板中使用 v-if 判断单元格是否为编辑状态,并根据情况显示不同的内容即可。 具体代码示例如下: ``` <el-table :data="tableData" :highlight-current-row="true"> <el-table-column prop="name" label="姓名" :formatter="nameFormatter" :editable="true" scoped-slot="default"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true" scoped-slot="default"></el-table-column> <el-table-column prop="sex" label="性别" :editable="true" scoped-slot="default"></el-table-column> </el-table> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, sex: '男' }, { name: '李四', age: 22, sex: '女' }, { name: '王五', age: 25, sex: '男' } ], editCell: null } }, methods: { nameFormatter(row, column) { return this.editCell === `${row.name}-${column.property}` ? <el-input v-model={row[column.property]} size="mini" @blur={this.editCell = null}></el-input> : row[column.property]; }, edit(row, column) { this.editCell = `${row.name}-${column.property}`; this.$nextTick(() => { this.$refs[this.editCell][0].$refs.input.focus(); }); } } } </script> ``` 通过上述两种方式,都可以实现 el-table 可编辑的功能。具体选哪种方式,可以根据实际情况进行选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值