iview table设置状态类的一列数据样式

最新推荐文章于 2025-02-17 11:49:35 发布

無理:)

最新推荐文章于 2025-02-17 11:49:35 发布

阅读量399

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_62810001/article/details/129023726

css 同时被 2 个专栏收录

1 篇文章

订阅专栏

iview

1 篇文章

订阅专栏

该段代码展示了如何在表格的columns中设置字段及其样式，根据不同的`processStateName`值，使用JavaScript的渲染函数生成不同颜色和样式的div来展示状态，如已保存(草稿)、审批中和已完结，分别用灰色、蓝色和绿色背景表示。

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

在columns中设置字段及样式

{
          title: '计划状态',
          key: 'processStateName',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            if (params.row.processStateName == '已保存(草稿)') {
              return h('div',
                {
                  style: {
                    width: '90px',
                    height: '30px',
                    lineHeight: '30px',
                    fontSize: '14px',
                    color: '#fff',
                    backgroundColor: '#ccc'
                  }
                }, params.row.processStateName
              )
            } else if (params.row.processStateName == '审批中') {
              return h('div',
                {
                  style: {
                    width: '70px',
                    height: '30px',
                    marginLeft: '10px',
                    lineHeight: '30px',
                    color: '#fff',
                    fontSize: '14px',
                    backgroundColor: 'blue'
                  }
                }, params.row.processStateName
              )
            } else if (params.row.processStateName == '已完结') {
              return h('div',
                {
                  style: {
                    width: '70px',
                    height: '30px',
                    marginLeft: '10px',
                    lineHeight: '30px',
                    color: '#fff',
                    fontSize: '14px',
                    backgroundColor: 'green'
                  }
                }, params.row.processStateName
              )
            }
          }
        },