[Vue3] 요소와 테이블 필드 콘텐츠가 비어 있을 때 맞춤 콘텐츠 표시

1. 요구 사항 설명

테이블을 사용하여 프런트 엔드의 백그라운드 인터페이스에서 반환한 목록 데이터를 표시합니다.때로는 일부 필드의 내용이 null입니다.이때 모양을 통일하기 위해 css 속성을 사용하여 빈 필드를 수정할 수 있습니다. 사용자 지정 콘텐츠를 표시하도록 테이블을 만듭니다. 렌더링은 다음과 같습니다.

2. 시행방법

이것은 페이지의 코드입니다. 단순화를 위해 불필요한 속성이 제거되었습니다. el-table태그에 속성을 추가 해야 합니다.cell-style

<template>
    <el-table :data="filterTableData" :cell-style="cellStyle">
        <el-table-column prop="id" type="index" label="序号" width="90px" align="center" />
        <el-table-column prop="title" sortable label="反馈标题" />
        <el-table-column prop="categories" sortable label="反馈类别" />
        <el-table-column prop="senderEmail" sortable label="发送者" />
        <el-table-column prop="sendTime" sortable label="发送时间" />
        <el-table-column fixed="right" align="right" width="200px">
            <template v-slot="scope">
                <el-button type="primary" size="small">查看</el-button>
                <el-button type="success" size="small">回复</el-button>
            </template>
        </el-table-column>
    </el-table>
<template>

script레이블 에서 해당 작업을 작성하십시오. row행과 column행의 모든 ​​열은 rowIndex、columnIndex각각 행 번호와 열 번호입니다.

column.property열의 내용을 가져올 수 있으며 셀 스타일 변경 등과 같은 다른 사용자 지정 작업을 이러한 방식으로 수행할 수도 있습니다.

<script setup>
// 表格字段为空操作
const cellStyle= ({
     
      row, column, rowIndex, columnIndex })=> {
    
    
  if (row[column.property] == null) {
    
    
    row[column.property] = '--'
  }
}
</script>