Element: Customer Table Header

render-header and formatter

by Theara Yuom

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
                v-for="item in column"
                :key="item.key"
                :prop="item.key"
                :label="item.title"
                :render-header="renderHeader"
                :formatter="formatterColumn"
        >
        </el-table-column>
    </el-table>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

Babel + JSX

new Vue({
        el:"#app",
        data() {Babel + JSX
            return {
                column:[
                    {key:"date",title:"日期CSS"},
                    {key:"name",title:"姓名"},
                    {key:"other",title:"其他"},
                ],
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎1',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎2',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎3',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎4',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
        },
        methods:{
            renderHeader(h, { column, $index }){
                let key = column.property;
                if('name' === key){
                    return h('div', {style: "color:red;text-align:center"}, [column.label, h('sup', {style: "font-size:8px"}, 'ii')]);
                }else{
                    return column.label;
                }
            },
            formatterColumn(row,column){
                let key = column.property;
                let h = this.$createElement;
                if('other' === key){
                    return h('el-button','editor');
                }else if('name' === key){
                    return h('div',{style:"text-align:center"},[h("el-popover", {
                        ref: "pop",attrs: {placement: "top", trigger: "hover"}
                    }, [h("div",{style:"max-width:100"},[row.address])]), h("div", {
                        directives: [{name: "popover",rawName: "v-popover:pop",arg: "pop"}]
                    },row[key])])
                }else{
                    return row[key];
                }
            }
     ...