1、slot="header"
<el-table-column prop="handle"> <template slot="header"> <span @click="seeDetail">查看详情</span> <span class="explain" @click="seeHandle">只查看待处理</span> </template> <template slot-scope="scope"> <span>{{ scope.row.operateType === '1' ? '无申诉查看详情' : '申诉待处理' }}</span> </template> </el-table-column>2、render-header方法
<el-table-column prop="handle" :render-header="renderHeader" align="center"> <template slot-scope="scope"> <span :class="scope.row.handle === '1' ? 'noAppeal' : 'appeal'">{{ scope.row.handle === '1' ? '无申诉查看详情' : '申诉待处理' }}</span> </template> </el-table-column> renderHeader (h, column) { return h('div', [ h('span', { style: `cursor: pointer;`, on: { click: this.seeDetail } }, '查看详情'), h('span', { style: `background-color: #666;margin-left: 10px;padding: 6px 10px;cursor: pointer;`, on: { click: this.seeHandle } }, '只查看待处理') ] ) }, seeDetail() { console.log('查看详情111') }, seeHandle() { console.log('查看待处理1111') },
