iview/examples/routers/table.vue

69 lines
2.7 KiB
Vue
Raw Normal View History

<template>
2018-06-25 20:27:03 +08:00
<div>
2018-06-29 11:24:26 +08:00
<Table ref="currentRowTable" :columns="columns3" :data="data1"></Table>
2018-06-29 10:04:02 +08:00
<Button @click="handleClearCurrentRow">Clear</Button>
2018-06-25 20:27:03 +08:00
</div>
</template>
<script>
export default {
2017-07-19 15:09:15 +08:00
data () {
return {
2018-06-29 10:04:02 +08:00
columns3: [
2018-06-25 20:21:01 +08:00
{
2018-06-29 10:04:02 +08:00
type: 'index',
width: 60,
2018-06-29 10:04:02 +08:00
align: 'center',
indexMethod (row) {
return row._index;
}
2018-06-25 20:21:01 +08:00
},
2017-10-17 10:14:10 +02:00
{
title: 'Name',
key: 'name'
2018-03-20 19:28:39 +08:00
},
{
title: 'Age',
key: 'age'
2018-06-25 20:27:03 +08:00
},
{
title: 'Address',
2018-06-29 11:24:26 +08:00
key: 'address',
tooltip: true
2018-06-25 20:21:01 +08:00
}
],
data1: [
{
name: 'John Brown',
age: 18,
2018-06-29 11:24:26 +08:00
address: '自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h第二个为对象包含 row、column 和 index分别指当前行数据当前列数据当前行索引详见示例。自定义渲染列使用 Vue 的 Render 函数。传入两个参数,第一个是 h第二个为对象包含 row、column 和 index分别指当前行数据当前列数据当前行索引详见示例。自定义渲染列使用 Vue 的 Render 函数。传入两个参数,第一个是 h第二个为对象包含 row、column 和 index分别指当前行数据当前列数据当前行索引详见示例。',
date: '2016-10-03'
2018-06-25 20:27:03 +08:00
},
{
name: 'Jim Green',
age: 24,
2018-06-29 11:24:26 +08:00
address: 'London No. 1 Lake Park自定义渲染列使用 Vue 的 Render 函',
date: '2016-10-01'
2018-06-25 20:27:03 +08:00
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
2018-06-25 20:27:03 +08:00
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
2018-06-25 13:03:08 +08:00
}
2018-06-25 20:27:03 +08:00
]
}
},
methods: {
2018-06-29 10:04:02 +08:00
handleClearCurrentRow () {
this.$refs.currentRowTable.clearCurrentRow();
2018-06-25 13:03:08 +08:00
}
}
2017-10-23 19:01:47 +08:00
}
2018-06-25 13:03:08 +08:00
</script>