iview中Table组件使用render自定义Tag颜色

131 阅读1分钟

iview中Table组件使用render自定义Tag颜色

概述: 我们都知道在Tag组件可以自定义颜色,但会发现使用自定义颜色会导致文字颜色是白色,只有背景色会发生变化。下面是官网给出的例子:

image.png

分析: 究其原因是Tag组件的写法内包含了span,这才是我们要修改文字颜色的关键

方案:

{
  title: 'xx', 
  key: 'xx',
  render: (h, params) => {
    return h('Tag', {
      props: {
        color: // 这里对应的Tag中的color
      },
    }, [
      h('span', {
        style: {
          color: // 这里才是设置内部span的字体颜色
        }
      }, xxx) // Tag显示的内容
    ]);
  }
}

至此,Tag上的文字颜色就可以显示为我们想要的效果了!