在做后台管理系统时我们经常要对组件库里元素的样式做修改,特别是表格一类的,UI总能出点新花样,像表格按照排行,每一行都要背景色不一样或文字颜色不一样这种(如下图),今天我们来处理类似的问题。
方法如下:
setTableItem(){ // 必须使用nexTick,确保dom元素渲染完毕 this.$nextTick(function (){ //获取element-ui的table组件里的相关dom元素集合 const indexDom=this.$refs.elTable.$el.querySelectorAll('.el-table_1_column_1');// 指定特定元素 // 循环遍历每个dom元素,精准获取到我们要做判断的元素 indexDom.forEach((element,index) => { // 抛去表格标题元素 if(index===0){ return; } const dom = element.getElementsByClassName('cell')[0];// 必须加下标,因为dom元素下的属性在一个[{}]格式里 const domText=dom.innerText;// 拿到div里的文字 // 判断指定文字下我们展示什么颜色,或者是直接给元素加class名,方便加背景图之类的操作 switch(domText){ case '1': dom.style.color='red'; break; case '2': dom.style.color='blue'; break; case '3': dom.style.color='green'; break; default: dom.style.color ='gold'; } }); }) }
<template>
<div>
<el-table
ref="elTable"
:data="tableData"
style="width: 100%"
>
<el-table-column type="index" label="排名" width='150' align="center"></el-table-column>
<el-table-column
prop="date"
label="日期"
width="180"
align="center">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
align="center">
</el-table-column>
<el-table-column
prop="address"
label="地址"
align="center">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default{
name:'TableSet',
data(){
return{
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
mounted() {
this.fetchSomething();
this.setTableItem();
},
methods: {
async fetchSomething() {
await this.$axios
.get('toutiao/index?type=guonei&key=acc164890efe6d45761f937a643a091e')
.then((res) => {
console.log(res)
})
},
setTableItem(){
this.$nextTick(function (){
const indexDom=this.$refs.elTable.$el.querySelectorAll('.el-table_1_column_1');
indexDom.forEach(element => {
const dom = element.getElementsByClassName('cell')[0];
const domText=dom.innerText;
switch(domText){
case '1':
dom.style.color='red';
break;
case '2':
dom.style.color='blue';
break;
case '3':
dom.style.color='green';
break;
}
});
})
}
},
}
</script>
<style lang="scss" scoped>
</style>