vue3+element plus 如何实现可编辑表格

最新推荐文章于 2025-03-10 09:42:30 发布

xhjtcflm

最新推荐文章于 2025-03-10 09:42:30 发布

阅读量8.6k

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/xhjtcflm/article/details/131032365

版权

文章介绍了如何在Vue项目中利用ElementPlus组件库的VirtualizedTable和普通Table结合Input实现表格内容的编辑。通过数据绑定和失焦事件处理，可以控制输入框的样式变化，例如在点击表格内容时显示边框，失焦后修改背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：使用element plus 中的 Virtualized Table 虚拟化表格

具体使用详见element plus 官网

方法二：使用element plus 中的table表格+input输入框，特点是可控制输入框得焦与失焦之后样式的改变（通过事件对象拿到dom，并控制后续样式变化）

样式如下：

1.点击表格内容部分，输入框边框显示出来，此时内容可编辑

2.失焦之后，根据失焦事件完成后续样式修改

代码如下：

<template>       

<el-table :data="tableData" stripe style="width: 100%" :editable="true" border>
            <el-table-column prop="date" label="Date" width="180" align="center">
                <template #default="scope">
                    <input type="text" v-model="scope.row.date" class="ipt" style="width:100px;text-align: center;" />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="Name" width="180" align="center">
                <template #default="scope">
                    <input type="text" v-model="scope.row.name" class="ipt" style="width:100px;text-align: center;"
                        @blur="iptBlur(scope.row, $event)" />
                </template>
            </el-table-column>
            <el-table-column prop="address" label="Address" align="center" width="320">
                <template #default="scope">
                    <input type="text" v-model="scope.row.address" class="ipt" style="width:280px;text-align: center;" />
                </template>
            </el-table-column>
        </el-table>

</template>




<script lang="ts" setup>

import { ref, reactive } from 'vue'

const tableData =ref([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
] as any)

//失焦事件，使用事件对象拿到dom元素并进行后续样式的修改
const iptBlur = (value: any, e: any) => {
    // 输入框失焦之后，背景颜色变为粉色
    e.target.style.background = 'pink'
}

</script>




<style lang="scss">

// 设置表格中输入框为边框为0
.ipt {
    border: 0px;
}

</style>