iView 是一套非常好用的基于vue.js的前端框架, 里面的組件非常豐富. 使用iView , 可以快速的開發(fā)出好看的頁面, 節(jié)約開發(fā)成本.

iView 的 Table 組件, 功能十分強(qiáng)大. 但是想要在里面渲染一些操作使用的按鈕, 需要用到render 函數(shù), 像這樣:

 {
    title: 'Action',
    key: 'action',
    fixed: 'right',
    width: 120,
    render: (h, params) => {
        return h('div', [
            h('Button', {
                props: {
                    type: 'text',
                    size: 'small'
                }
            }, 'View'),
            h('Button', {
                props: {
                    type: 'text',
                    size: 'small'
                }
            }, 'Edit')
        ]);
    }
}

如果想要在列表里面渲染一些iview自帶的組件, 比如說 Poptip, 直接render 是不行的, 需要把這個Poptip 封裝成一個組件

// '/components/MarkPoptip.vue'


<template>
    <Poptip placement="right">
        <Button type="text" size="small" style="color: #ff9900">mark</Button>
        <div class="mark-poptip" slot="content">
            <p><Button type="success" size="small" icon="happy-outline" @click="markSuccess">成功</Button></p>
            <p><Button type="default" size="small" icon="sad-outline" @click="markFail">失敗</Button></p>
            <p><Button type="default" size="small" icon="ios-close" @click="markClose">關(guān)閉</Button></p>
        </div>
    </Poptip>
</template>

<script>
    export default {
        mounted() {
        },
        props: {
            job_id : {
                default: 0,
                type: Number,
            }
        },
        methods: {
            markSuccess(){
                this.$http.put(`/jobs/mark/success/${this.job_id}`).then( response => {
                    this.$Message.success('操作成功');
                    this.$emit('statusUpdated');    // 重新請求列表數(shù)據(jù)
                })
            },
            markFail() {
                this.$http.put(`/jobs/mark/fail/${this.job_id}`).then( response => {
                    this.$Message.success('操作成功');
                    this.$emit('statusUpdated');// 重新請求列表數(shù)據(jù)
                })
            },
            markClose(){
                this.$http.put(`/jobs/mark/close/${this.job_id}`).then( response => {
                    this.$Message.success('操作成功');
                    this.$emit('statusUpdated');// 重新請求列表數(shù)據(jù)
                })
            }
        }
    }
</script>

然后在列表里這樣渲染

import MarkPoptip  from './components/MarkPoptip';



 {
    title: '操作',
    minWidth: 250,
    render: (h, params) => {
        return h('div', [
            h(MarkPoptip, {
                props: {
                    job_id: params.row.id
                },
                on: {
                    statusUpdated: () => {
                        this.getListData();
                    }
                }
            })
        ]);
    }
}

這樣, 就能在 Table 表格里面渲染出 Poptip 了.