表格
基本用法
姓名
|
分数
|
操作
|
---|---|---|
醒狮 | xx | |
辛弃疾 | xx | |
鲤鱼 | xx | |
醒狮 | xx | |
辛弃疾 | xx |
export default {
data() {
return {
loading: false,
selection1: [{ id: 2, name: '辛弃疾', score: 90 }],
columns: [
{ title: '姓名',prop: 'name', sortOrder: 'ascend', width: 180 },
{
title: '分数',
prop: 'score',
sortOrder: 'descend',
render: (h, params) => {
return h('div', [
h('strong', this.xx())
]);
}
},
{
title: '操作',
width: 200,
render: (h, params) => {
return h('div', [
h('g-button',
{
on: {
click: () => console.log('params', params)
}
},
'编辑'
),
h('g-button', '删除')
])
}
}
],
dataSource: [
{ id: 1, name: '醒狮', score: 100, description: 'xxxxxxx' },
{ id: 2, name: '辛弃疾', score: 90 },
{ id: 3, name: '鲤鱼', score: 80 },
{ id: 4, name: '醒狮', score: 100, description: '阿斯蒂芬阿斯蒂芬' },
{ id: 5, name: '辛弃疾', score: 90 }
]
}
},
methods: {
selectionChange() {
console.log(this.selection1)
},
xx() {
return 'xx'
},
x(order) {
this.loading = true
setTimeout(() => {
if (order.sortOrder === 'ascend') {
this.dataSource.sort((a, b)=>{
return a[order.prop] - b[order.prop]
})
} else {
this.dataSource.sort((a, b)=>{
return b[order.prop] - a[order.prop]
})
}
this.loading = false
}, 2000)
},
}
}
可选择
姓名
|
分数
|
操作
| |
---|---|---|---|
醒狮 | xx | ||
辛弃疾 | xx | ||
鲤鱼 | xx | ||
醒狮 | xx | ||
辛弃疾 | xx |
<g-table
v-on:selectionChange="selectionChange"
:selection.sync="selection1"
selectionVisible
:columns="columns"
v-on:orderChange="x"
:data-source="dataSource">
</g-table>
展开行
姓名
|
分数
|
操作
| |
---|---|---|---|
醒狮 | xx | ||
辛弃疾 | xx | ||
鲤鱼 | xx | ||
醒狮 | xx | ||
辛弃疾 | xx |
<g-table
expand-key="description"
:columns="columns"
:data-source="dataSource">
</g-table>