iview表格颜色可动态配置

由于新的功能需求，需要对表格颜色进行动态的配置，iview内部本身有对表格进行颜色设置，但是由于样式都需要提前写好，无法动态配置，所以自己在iview的基础上对dom树进行操作，但会一定程度上影响性能，这里仅展示对单元格颜色设置
1.首先看一下自带的表格,可以看官网：https://www.iviewui.com/components/table#ZDYLMB

从图中可以看到，单元格可以设置cellClassName属性，对单元格进行颜色的配置，但是只能配置class,于是用render函数对dom进行操作，当然，字体颜色可以直接用render里头的style进行设置，但是背景色需要操作dom元素，不然设置的背景色无法覆盖单元格
iview的表格：

 <Table ref="table" :height="tableHeight" :loading="loading" :columns="columns" :data="data"   style="background:#fff;margin-top:70px;"></Table>

获取数据如下：

export default {
  name: 'application',
  data () {
    return {
		columns: [
		   { title: '序号', type: 'index', width: 60, align: 'center' },
		   { title: '企业类型', key: 'typeName', align: 'center', 
		     render: (h, params) =>{
		       // 需要延迟处理，否则颜色无法赋值
		       setTimeout(() => {
		         let dom = document.getElementsByClassName(`${params.row.cellClassName.typeName}`)
		         dom[0].style.backgroundColor= `${params.row.bgColor.typeName}`
		       }, 20)
		       return h('div', {
		         style: {
		         // 对文字颜色可直接设置，但是背景色无法直接在这里设置，无法填满整个单元格
		           color: '#fff'
		         }
		       }, params.row.typeName)
		     }
		   },
		   { title: '企业名称', key: 'organizationalName', align: 'center',
		     render: (h, params) =>{
		       setTimeout(() => {
		         let dom = document.getElementsByClassName(`${params.row.cellClassName.organizationalName}`)
		         dom[0].style.backgroundColor= `${params.row.bgColor.organizationalName}`
		       }, 20)
		       return h('div', {
		         style: {
		           color: 'pink'
		         }
		       }, params.row.organizationalName)
		     }
		   }
		 ],
		 data:[
		  {
		    typeName: '类型1',
		    organizationalName: '名称1',
		    cellClassName: {
		    	// class名称不能相同，获取的数据格式
		      typeName: 'demo1',
		      organizationalName: 'demo-table1'
		    },
		    bgColor: {
		      typeName: 'rgba(0,0,0,0.8)',
		      organizationalName: '#f60'
		    }
		  },
		  {
		    typeName: '类型2',
		    organizationalName: '名称2',
		    cellClassName: {
		      typeName: 'demo2',
		      organizationalName: 'demo-table2'
		    },
		    bgColor: {
		      typeName: '#2db7f5',
		      organizationalName: '#187'
		    }
		  }
		],
	}
  }
}

效果如下图

当然，直接操作dom还是比较不好的，但是目前没想到更好的方案，行列也可以用类似的方法，不过不同点是在获取到数据以后，对dom进行操作

2019/7/8
优化方案，之前render方式操作dom，会非常的频繁，每一个单元格都进行了渲染一次，当表格数据过多的时候，容易出现卡顿，而且很多都是不必要的重复操作，现在方法是去除rander操作dom，一次性操作

// 方法
setRowClass () {
  if (this.$refs.table.$el) {
    setTimeout(() => {
      // 表格加载结束后加载dom，需延迟一下
      let td = document.querySelectorAll(`td`)
      for (let i = 0; i < td.length; i++) {
      	// 操作dom，这边需要另外一些判断，比如当前className以及样式，这样好处是减少操作dom次数
      	// 坏处是className判断比较不好判断，以及cssText样式比较难获取
        if (td[i].className === 'name') {
          td[i].style.cssText = 'color: red; background:pink'
        }
      }
    }, 20)
  }
},