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

原创

于 2022-09-24 14:06:55 发布

· 2.8k 阅读

0 ·

版权

文章标签：

#javascript #前端 #vue.js

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

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

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: "王小虎",address: "