ant-design vue table表格高亮某一行某一格

最新推荐文章于 2023-11-03 14:41:47 发布

三155

最新推荐文章于 2023-11-03 14:41:47 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/beloved_jodie/article/details/124690129

版权

本文介绍了如何在使用ant-design-vue库的表格组件中，通过自定义渲染函数实现特定行或单元格的高亮显示。通过遍历数据并检查特定条件，当条件满足时为单元格添加红色样式，从而达到高亮效果。示例代码展示了如何针对不同的数据字段进行高亮处理。

摘要由CSDN通过智能技术生成

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=1
data[2].building=1
data[4].building=1
data[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=1
            for(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 a
            for(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>
                    }
                  })
        },
      ],
    }
  }
}