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

最新推荐文章于 2024-03-04 14:11:18 发布

原创最新推荐文章于 2024-03-04 14:11:18 发布 · 418 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#view design #css #前端

css 同时被 2 个专栏收录

1 篇文章

订阅专栏

iview

1 篇文章

订阅专栏

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

在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
              )
            }
          }
        },