首页 > 其他 > 详细

iView的表单table

时间:2019-06-03 20:56:25      阅读:137      评论:0      收藏:0      [点我收藏+]
// 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>

 

iView的表单table

原文:https://www.cnblogs.com/panax/p/10969077.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!