element-ui error
by zpczjl
HTML
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
{{multipleSelection}}
<el-table :data="getData()" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="Date" width="120">
<template scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column property="name" label="Name" width="120">
</el-table-column>
<el-table-column property="address" label="Address" show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
</div>
CSS
@import url("//unpkg.com/element-ui/lib/theme-default/index.css");
JavaScript
var Main = {
data() {
return {
data: [],
multipleSelection: []
}
},
methods: {
getData() {
console.log('getData')
return [{
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'
}, {
date: '2016-05-08',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-06',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}, {
date: '2016-05-07',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles'
}]
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')