vxe-table循环生成表格，表格里的某些数值设置颜色

最新推荐文章于 2024-08-08 18:24:06 发布

前端程序媛Ying

最新推荐文章于 2024-08-08 18:24:06 发布

阅读量740

点赞数 9

分类专栏： vue web前端 JS 文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/m0_62323730/article/details/134989822

版权

web前端同时被 3 个专栏收录

55 篇文章 0 订阅

订阅专栏

vue

34 篇文章 1 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

文章讲述了如何在Vue应用中使用Vxe-Table组件，针对后台返回的表格数据，当特定列（如‘当期’）的值超过waterGuildLine时，显示红色。通过v-for循环生成列名，以及getRowStyle方法来动态设置单元格样式。

摘要由CSDN通过智能技术生成

业务需求：表格的列名是循环出来的，后台返回每行的表格数据结构如下，需要表格里只有“当期”的行里数值超限waterGuildLine后显示红色。需要在vxe-table里写个插槽，再写个方法。

          <vxe-table border ref="dayTableRef" height="100%" :column-config="{ resizable: true }" :data="tableDataInstShow"
            :menu-config="menuConfig" @menu-click="contextMenuClickEvent">
            <vxe-column v-for="(item, index) in columnDayData" :key="item.value" :field="item.value" show-overflow
              :title="item.name" align="center" :width="index === columnDayData.length - 1 ? 100 : filterWidth(item.name)"
              :fixed="index === 0 ? 'left' : (index === columnDayData.length - 1) ? 'right' : ''">
              <template #default="{ row }">
                <span :style="getRowStyle(row, item.value)">{{ row[item.value] }}</span>
              </template>
            </vxe-column>
          </vxe-table>

       state.columnDayData = [
          { name: '年月', value: 'getTime' },
        ];

        for (let i = 1; i < 32; i++) {
          state.columnDayData.push({ name: `${i}号`, value: `day${i}` })
        }
        state.columnDayData.push({ name: '合计', value: 'total' })



     getRowStyle(row, columnKey) {
        if (state.selectValue3 === '2' && row?.getTime?.indexOf('当') !== -1) {
          const value = row[columnKey];
          if (value > row?.waterGuideLine && columnKey !== 'getTime' && columnKey !== 'total') {
            return 'color: var(--gdky-warning-status-color)';
          }
        }
        return '';
      },