Element: Render Header Table

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" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180">
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180">
      </el-table-column>
      <el-table-column prop="address" label="Address">
      </el-table-column>
      <el-table-column :render-header="renderHeader">
        
      </el-table-column>
    </el-table>
</div>

SCSS

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

Babel + JSX

new Vue({
	el:"#app",
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }, {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }],
      checkList:['A', 'B', 'C']
    }
  },
  methods:{
  	renderHeader(h, { column, $index }){
    	const self = this;
    	return h('el-input', {
      		attrs: {
        		type: 'primary'
        	},
/*           on: {
            click(){ self.handleClick()}
          }
            */
            {
            
            }
            })
/* 				return h(
				          'el-dropdown',
				          {},
				          [
				            h('span', {class: "el-dropdown-link"}, ['Hi', h('i', {class:"el-icon-arrow-down el-icon--right"})]),
				            h('el-dropdown-menu', {slot: "dropdown"},[
				              h('el-checkbox-group', {"v-model": "checkList"}, [
				                h('el-checkbox', {label: 'A'}, 'A'),
				                h('el-checkbox', {label: 'B'}, 'B'),
				                h('el-checkbox', {label: 'C'}, 'C'),
				              ]),
				            ])
				          ]
				        )
				   */	
  },
  handleClick(){
  	alert('Click me')  
  }
  }
})