iview表格改变字体颜色

Vue表格组件自定义渲染

最新推荐文章于 2022-11-09 15:04:31 发布

原创最新推荐文章于 2022-11-09 15:04:31 发布 · 6.5k 阅读

5 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何在Vue中使用Table组件实现自定义渲染，包括根据数据状态改变单元格文字颜色的方法，通过具体代码示例展示了如何在表格的姓名列中实现这一功能。

export default {
data() {
return {
columns: [
{
   title: '姓名', key: '', align: 'center', render: (h, params) => {            
       return h('div',[
          h('span', {
             style: {
                color: '#f00'
              }
          }, params.name),
       ]); 
    }
},
],
loading: false,
}
}
}

根据状态改变颜色：

style: {color: params.name = 'a' ?'#0f0':'#f00'}