ant-design vue table表格高亮某一行 某一格
// 页面表格<a-table:columns="columns":data-source="data"bordered:row-selection="ListOfSssignmentSelection" // 和高亮无关:rowClassName="rowListOfSssignmentPoints" // 和高亮无关size="middle":scroll="{ x: 'calc(700px + 50%)', y: 240 }">// 逻辑const data = [];for (let i = 0; i < 100; i++) {data.push({key: i,name: 'John Brown',jobName:'作业点',age: i + 1,street: 1,building: 0,number: 1,companyAddress: 1,companyName: 1,gender: 1,});}data[0].building=1data[2].building=1data[4].building=1data[6].building=1 export default {data() {return {columns:[{title: '作业点编号',dataIndex: 'name',key: 'name',width: 100,fixed: 'left',customRender:((text, record, index)=>{// 高亮处理函数 console.log(text, record, index);let a=1for(let k in record){if(record[k]==0 && k!='key'){console.log(record[k],k);a=record[k]break }}console.log(a);if(a==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},{title: '作业点名称',dataIndex: 'jobName',key: 'jobName',width: 100,customRender:((text, record, index)=>{// 高亮处理函数// console.log(text, record, index);let afor(let k in record){console.log(record[k]);if(record[k]==0 && k!='key'){a=record[k]break }}if(a==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},{title: '信息采集',children: [{title: '结构化对象',dataIndex: 'age',key: 'age',width: 200,// sorter: (a, b) => a.age - b.age,scopedSlots: {customRender: 'age' },customRender:((text, record, index)=>{// 高亮处理函数if(text==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},{title: '非结构化对象',children: [{title: '勘察照片',dataIndex: 'street',key: 'street',width: 200,scopedSlots: {customRender: 'street' },customRender:((text, record, index)=>{// 高亮处理函数if(text==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},{title: '勘察报告',children: [{title: '勘察报告',dataIndex: 'building',key: 'building',width: 100,// scopedSlots: { customRender: 'building' },customRender:((text, record, index)=>{// 高亮处理函数if(text==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},{title: '作业点级勘察报告',dataIndex: 'number',key: 'number',width: 120,scopedSlots: {customRender: 'number' },customRender:((text, record, index)=>{// 高亮处理函数if(text==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},],},],},],},{title: '图表绘制',children: [{title: '结构化对象',dataIndex: 'companyAddress',key: 'companyAddress',width: 200,scopedSlots: {customRender: 'companyAddress' },customRender:((text, record, index)=>{// 高亮处理函数if(text==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},{title: '非结构化对象',dataIndex: 'companyName',key: 'companyName',scopedSlots: {customRender: 'companyName' },customRender:((text, record, index)=>{// 高亮处理函数if(text==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},],},{title: 'Gender',dataIndex: 'gender',key: 'gender',width: 80,fixed: 'right',scopedSlots: {customRender: 'gender' },customRender:((text, record, index)=>{// 高亮处理函数if(text==0){return <span style="color:red">{text}</span>}else{return <span>{text}</span>}})},],}}}
