表格头部自定义图标并且使用el-tooltip加表格的显示，一般的el-tooltip提示只是文字，但是涉及到表格的时候可以通过原生或者UI框架的组件进行代码实现，本文通过element-ui的el-table进行表格的实现，也可以实现表单等功能。
<el-table
:data="tableData2"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:render-header="renderHeader"> // 加入render事件
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
// render 事件
renderHeader (h,{column}) { // h即为cerateElement的简写，具体可看vue官方文档
return h(
'div',[
h('span', column.label),
h('i', {
class:'el-icon-location',
style:'color:#409eff;margin-left:5px;'
})
],
);
}
},
data() {
return {
tableData2: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
methods:{
renderHeader (h,{column}){
const params = [{data1: '测试', data2: 'ceshi'},{data1: '测试', data2: 'ceshi'}]
return h(
'div', [
h('span', column.label),
h('el-tooltip', {
props: {
placement: 'top',
effect: 'light',
},
}, [
h('el-table', { //对element-ui的表格进行html代码实现
slot: 'content',
style: {
whiteSpace: 'normal',
'margin-bottom': '10px',
'height': '150px',
'overflow-y': 'auto'
},
props: {
data: params,
size: 'small',
height: 150
}
}, [
h('el-table-column', {
props: {
label: '测试单元1',
width: 80,
prop: 'data1'
}
},),
h('el-table-column', {
props: {
label: '测试单元1',
prop: 'data1'
}
},)
],),
h('i', { // 表头的图标显示
class: 'el-icon-question',
style: 'color:#5474E7;margin-left:5px;'
})
],)
]
)
},
}
}
</script>
