iView的表单table
// 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', width: 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>
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!