vue+iview+table修改样式color

最新推荐文章于 2024-06-27 19:26:34 发布

原创最新推荐文章于 2024-06-27 19:26:34 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了一种使用iView UI框架进行复杂数据渲染的方法，通过自定义渲染函数实现不同状态的数据可视化展示，如使用图标和颜色区分数据等级，提高了数据的可读性和直观性。

一。iview代码

{
            title: '超警(m)',
            key: 'age',
            align: "center",
            render: (h, params) => {
                  return h('div', [
                      h('Icon', {
                          props: {
                              type: "md-pin"
                          },
                          style: {
                              color: (params.row.age == 3)?"red":(params.row.age ==4?"yellow":"blue"),
                              marginRight: '5px',
                              fontSize: '18px'
                          },
                      }),
                      h('span', params.row.age)
                  ]);
              }
          },

二.结果