iview/examples/routers/table.vue

68 lines
2 KiB
Vue
Raw Normal View History

<template>
2017-09-18 10:33:58 +08:00
<div>
2017-09-18 13:52:40 +08:00
<Table highlight-row :columns="columns3" :data="data1" ref="table" @on-current-change="handleChange" @on-row-click="rc"></Table>
2017-09-18 10:33:58 +08:00
<Button @click="handleClear">clear</Button>
</div>
</template>
<script>
export default {
2017-07-19 15:09:15 +08:00
data () {
return {
2017-09-18 10:33:58 +08:00
columns3: [
{
2017-09-18 10:33:58 +08:00
type: 'index',
2017-09-03 12:26:16 +08:00
width: 60,
align: 'center'
2017-07-19 15:09:15 +08:00
},
{
title: '姓名',
key: 'name'
2017-07-19 15:09:15 +08:00
},
{
title: '年龄',
2017-09-18 13:52:40 +08:00
key: 'age',
sortable: true
2017-07-19 15:09:15 +08:00
},
{
title: '地址',
key: 'address'
}
2017-07-19 15:09:15 +08:00
],
2017-09-03 12:26:16 +08:00
data1: [
2017-07-20 09:59:44 +08:00
{
name: '王小明',
age: 18,
2017-09-18 10:33:58 +08:00
address: '北京市朝阳区芍药居'
2017-07-20 09:59:44 +08:00
},
{
name: '张小刚',
age: 25,
2017-09-18 10:33:58 +08:00
address: '北京市海淀区西二旗'
2017-07-20 09:59:44 +08:00
},
{
name: '李小红',
age: 30,
2017-09-18 10:33:58 +08:00
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
2017-09-18 10:33:58 +08:00
address: '深圳市南山区深南大道'
}
2017-07-17 17:05:10 +08:00
]
}
2017-09-18 10:33:58 +08:00
},
methods: {
handleClear () {
this.$refs.table.clearCurrentRow();
},
handleChange (newData, oldData) {
2017-09-18 13:52:40 +08:00
// console.log(newData, oldData)
},
rc (data, index) {
console.log(data, index);
2017-09-18 10:33:58 +08:00
}
}
}
2017-09-03 12:26:16 +08:00
</script>