Vue给table指定行加样式（附源码）

最新推荐文章于 2024-04-25 15:28:41 发布

原创最新推荐文章于 2024-04-25 15:28:41 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用vxe-table插件为动态表格的特定行添加样式，如字体加粗等效果，并提供具体实现代码示例。

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

需求：动态表格指定行加样式

解决方法：:cell-style=“cellStyle”

适用表格插件：Element、vxe-table

注：本文以vxe-table表格插件示例，Element表格同理

示例：给动态表格第2行、第3行、第5行字体加粗


<vxe-table v-else border stripe :data="dataSource" :cell-style="cellStyle" >
      <vxe-table-column v-for="item in tableColumn" :field="item" :title="item">
      </vxe-table-column>
</vxe-table>


methods:{
    cellStyle(row,column,rowIndex,columnIndex){
         console.log(row,column,rowIndex,columnIndex)
           if (row.seq == '10' ||row.seq == '11'|| row.seq == '13') {
               return `font-weight:bolder!important;`;
            } else {
                 return ''
            }
    }
}