element文檔鏈接：

https://element-plus.org/zh-CN/component/form.html

一、el-table表格行展開關閉箭頭替換成加減號

注：Vue3在樣式中修改箭頭圖標無效，可能我設置不對，歡迎各位來交流指導

? ? ? ?轉變思路：隱藏箭頭，添加一行顯示展開關閉所需圖標

1、隱藏箭頭

.el-table__expand-icon .el-icon svg {display: none;
}

此時只是箭頭不可見，但是箭頭的占位還在，顯得很空

2、去掉箭頭空白，添加替換箭頭的圖標列

在顯示展開內容的列標簽中設置width="1"

<el-table-column type="expand" width="1" ><template #default="props"><div class="tableItem" :style="{ width: 'calc(100%)'}" ><el-table :data="props.row.family"><el-table-column type="index" width="70" label="排名" prop="name" align="center"/><el-table-column prop="projectNum" label="項目編號" align="left"/><el-table-column prop="projectName" label="項目名稱"  align="left"/></el-table></div></template>
</el-table-column><el-table-column width="40" align="center" ><template #default="scope" ><el-icon :size="15" v-if="scope.row.expanded" color="#000000"><Minus/></el-icon><el-icon :size="15" v-else color="#000000"><Plus/></el-icon></template></el-table-column>

二、點擊整行展開數據

表格數據：

const tableData = ref([{projectNum:'YCA20241120001',id:'5862458213',projectName:'項目名稱項目名稱項目名稱',month: '2024-10',expanded:false,family: [{projectNum:'YCA20241120001',projectName:'項目名稱項目名稱項目名稱',},{projectNum:'YCA20241120001',projectName:'項目名稱項目名稱項目名稱',}]},{id:'5862456248',projectNum:'YCA20241120001',projectName:'項目名稱項目名稱項目名稱',month: '2024-11',expanded:false,}
])

使用到el-table的三個屬性，含義請看element文檔

? ? ? ? row-key="id"

? ? ? ? :expand-row-keys="expands"

? ? ? ? @row-click="clickRowHandle"

<el-table :data="tableData" v-loading="state.loading"  @selection-change="selectionChangHandle"@sort-change="sortChangeHandle":border="false" style="width: 100%" row-key="id":expand-row-keys="expands"@row-click="clickRowHandle">
</el-table>

邏輯代碼：

const expands = ref([])
//點擊事件
const clickRowHandle = (row: any) => {row.expanded=!row.expandedif (expands.value.includes(row.id)) {expands.value = expands.value.filter(val => val !== row.id)}else {expands.value.push(row.id)}
}

三、外部表格序號和排名序號對齊

設置表格el-table-column的padding-left和magin-left是無效的

解決方法：

?:cell-style="productiontableStyle"

?:headerCellStyle="productiontableStyle"

<el-table-column type="expand" width="1" ><template #default="props"><div class="tableItem" :style="{ width: 'calc(100%)'}" ><el-table :data="props.row.family" :cell-style="productiontableStyle" :headerCellStyle="productiontableStyle"><el-table-column type="index" width="70" label="排名" prop="name" align="center"/><el-table-column prop="projectNum" label="項目編號" align="left"/><el-table-column prop="projectName" label="項目名稱"  align="left"/></el-table></div></template>
</el-table-column>

邏輯代碼：

const productiontableStyle=(column:any) =>{if(column.columnIndex === 0) {return {'padding-left':'15px'}}
}