// html
<div class="exam-list">
<Table :columns="columns7" :data="data6" border height="500"></Table>
</div>
<script>
export default {
data () {
return {
columns7: [
{
title: 'Name',
key: 'name',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.name)
]);
}
},
{
title: 'Age', // 一个表头代码块
key: 'age'
},
{
title: 'Address', // 一个表头代码块
sortable:true, // 是否排序
key: 'address'
},
{
title: 'Action',
key: 'action',
150, // 单独设置宽
align: 'center', // 居中设置
render: (h, params) => {
return h('div', [
h('Button', {
props: { // 按钮设置
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index) // 调用函数
}
}
}, 'View'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index) // 删除
}
}
}, 'Delete') // button 内容文本
]);
}
}
],
data6: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park'
}
]
}
},
methods: {
show (index) {
this.$Modal.info({
title: 'User Info',
content: `Name:${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address:${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
},
created(){
this.data6 = data ; // 请求的数据
}
</script>