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>

 

posted @ 2019-06-03 17:50  Panax  阅读(2109)  评论(0编辑  收藏  举报