快捷導(dǎo)航

vue+Element-ui的el-table的多級(jí)內(nèi)容渲染問(wèn)題

更新時(shí)間：2023年10月16日 15:25:05 作者：鳴拙

這篇文章主要介紹了vue+Element-ui的el-table的多級(jí)內(nèi)容渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue+Element-ui的el-table的多級(jí)內(nèi)容渲染

將多層內(nèi)容渲染到表格里面

平常的表格是一個(gè)對(duì)象里面的數(shù)據(jù)渲染成一行，對(duì)象里面的key就是表格的label，如果對(duì)象里面還有對(duì)象數(shù)組那該怎么去渲染，如渲染下面的數(shù)據(jù)，將一個(gè)對(duì)象渲染成一行數(shù)據(jù)，和平常的table表格的數(shù)據(jù)渲染不一樣，這個(gè)不能直接渲染出來(lái)，需要加第三方的label來(lái)渲染數(shù)據(jù)

tableData: [
					{
						name: 'Huawei P40',
						properties: [
							{
								description: '顏色',
								value: '紅色'
							},
							{
								description: '內(nèi)存',
								value: '128G'
							}
						]
					},
					{
						name: '小米10',
						properties: [
							{
								description: '顏色',
								value: '黑色'
							},
							{
								description: '內(nèi)存',
								value: '128G'
							}
						]
					}
				]

代碼如下，另外加一個(gè)columnIndex數(shù)組，用來(lái)存儲(chǔ)數(shù)據(jù)里面的屬性的key

<template>
	<el-table :data="tableData" border>
		<el-table-column label="手機(jī)">
			<template slot-scope="scope">
				<span>{{scope.row.name}}</span>
			</template>
		</el-table-column>
		<el-table-column v-for="(item, index) in columnIndex" :key="index" :label="item">
	        <template slot-scope="scope">
				<span>{{scope.row.properties[index].value}}</span>
			</template>		
		</el-table-column>
	</el-table>
</template>

<script>
	export default {
		data() {
			return {
				// 有兩層數(shù)據(jù)，渲染表格
				columnIndex: ['顏色','內(nèi)存'],
				tableData: [
					{
						name: 'Huawei P40',
						properties: [
							{
								description: '顏色',
								value: '紅色'
							},
							{
								description: '內(nèi)存',
								value: '128G'
							}
						]
					},
					{
						name: '小米10',
						properties: [
							{
								description: '顏色',
								value: '黑色'
							},
							{
								description: '內(nèi)存',
								value: '128G'
							}
						]
					}
				]
			}
		}
	}
</script>

<style>
</style>

效果圖：

可以看到，properties里面的數(shù)據(jù)也渲染到表格里面了

Element UI 多級(jí)表格渲染

// TableColumn.js
function renderColumn(h, column){
    return h{
        'el-table-column',
        {
            props:{
                align:'center',
                ...column
            }
        },
        column&&column.children&&column.children.map(c=> renderColumn(h, c))
    }
}
export default {
    functional: true,
    props: {
        columns: {
            type:Array,
            default: ()=>[]
        }
    },
    render(h, ctx) {
        return ctx.props.columns.map(column => renderColumn(h, column ))
    }
 
}

// Table.vue
<template>
    <el-table
        ref="elTable"
        :data="list"
        stripe
        border
        height="100%"
    >
        
    </el-table>
</template>

<script>
    import TableColumn from './TableColumn.js'
    const columns = [
        {
            label:'一級(jí)',
            children:[
                {
                    label:'二級(jí)一',
                    align:'center',
                    prop:'name1'
 
                },
                {
                    label:'二級(jí)二',
                    children:[
                        {    
                            label:'三級(jí)一',
                            align:'center',
                            prop:'name2'
 
                        },
                        {
                            label:'三級(jí)二',
                            align:'center',
                            prop:'name3'
                    
                        }
                    ]
                    
                }
            ]
        }
        
    ]
    export default {
        name: "Table",
        data() {
            return {
                list:[]
            }
        }
    }
</script>