使用element tabel表头动态添加icon

主要通过 slot=“header” 插槽实现表头的icon

效果图

template

<el-table :data="tableData" border style="width: 100%" >
    <template v-for="(item,index) in tabHeader">
    	<!-- 通过 v-if="item.icon" 判断是否展示icon -->
        <el-table-column :prop="item.prop" v-if="item.icon" :key="index+item.prop">
        	<!-- slot="header" 插槽实现 -->
            <template slot="header">
                <div class="tab-header">
                	<!-- 表头 -->
                    {{ item.label }}
                    <i class="el-icon-warning"></i>
                </div>
            </template>
            <!-- <template slot-scope="scope"> {{ scope.row }} </template> -->
        </el-table-column>
        <el-table-column :prop="item.prop" :label="item.label" v-else :key="index+item.prop"></el-table-column>
    </template>
</el-table>

script

export default {
	data(){
		return{
			tableData: [
				{
			        cs1: '我是测试数据01',
			        cs2: '我是测试数据02',
			        icon1: '我是带icon的03',
			    },{
			        cs1: '我是测试数据01',
			        cs2: '我是测试数据02',
			        icon1: '我是带icon的03',
			    }
			], // 表格数据
			tabHeader: [ // 动态表头
				{
			        label: '测试01',
			        prop: 'cs1'
			    },{
			        label: '测试02',
			        prop: 'cs2'
			    },{
			        label: '带icon的测试03',
			        prop: 'icon1',
			        icon: true
			    }
			],
		}
	}
}

style

.tab-header{
     display: flex;
}