由于新的功能需求,需要对表格颜色进行动态的配置,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)
}
},