Vue

by Umesh Patil

HTML

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<el-table
						      :data="testtableData"
						      style="width: 100%">
						      <el-table-column
						        width="180">
                    <el-table-column
                        v-for=""
								        :props="header.label"
								        :label="header.label">
								        <div class="cell" style="color:red">{{index}}</div>
								      </el-table-column>
						      </el-table-column>
						    </el-table>

CSS

/* body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
} */

Vue

var tableData = [{
		            date: '2016-05-03',
		            name: 'Tom',
		            address: 'No. 189, Grove St, Los Angeles',
		            label:'name'
		          }, {
		            date: '2016-05-02',
		            name: 'Tom',
		            address: 'No. 189, Grove St, Los Angeles',
		            label:'name'
		          }, {
		            date: '2016-05-04',
		            name: 'Tom',
		            address: 'No. 189, Grove St, Los Angeles',
	            	label:'name'
		          }, {
		            date: '2016-05-01',
		            name: 'Tom',
		            address: 'No. 189, Grove St, Los Angeles',
		            label:'name'
		          }]
new Vue({
      el: '#app',
       methods: {
      handleClick() {
        console.log('click');
      }
    },
    data() {
      return {
        testtableData: tableData,
        state:"data",
        options5: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        }],
        value10: []
      }
    }
    })