Element table表格组件常见业务场景之新增表格行、自定义单元格样式、单元格可编辑

最新推荐文章于 2025-10-12 20:51:50 发布

原创

最新推荐文章于 2025-10-12 20:51:50 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了使用Element UI在前端开发中处理表格的常见业务场景，包括1)如何实现表格行的动态添加，解决因新数据为空导致的行高问题；2)自定义单元格样式，通过条件判断为特定单元格添加红色边框；3)实现单元格可编辑功能，详细阐述了点击事件、DOM操作以及失去焦点时的样式处理。文章最后还提供了一份前端学习资源包供读者领取。

1、新增表格行

业务场景: 表格行可供用户自定义添加

<template>
 <el-table:data="tableData"style="width: 100%"border><!-- :row-style="rowStyle" --><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="240"></el-table-column><el-table-columnprop="sex"label="性别"width="120"></el-table-column><el-table-columnprop="age"label="年龄"width="120"></el-table-column></el-table></template><script> export default {data() {return {tableData: [{date: "2016-05-02",name: "王小狗",address: "上海市普陀区金沙江路 1518 弄",sex: "女",age: null,},{date: "2016-05-04",name: "王小猫",address: "上海市普陀区金沙江路 1517 弄",sex: null,age: "29",},{date: "2016-05-01",name: "王小猪",address: "上海市普陀区金沙江路 1519 弄",sex: "女",age: "12",},{date: "2016-05-03",name: "王小虎",a