iView 在 table 表格裏渲染 Poptip 組件

iView 是一套很是好用的基於vue.js的前端框架, 裏面的組件很是豐富. 使用iView , 能夠快速的開發出好看的頁面, 節約開發成本.

iView 的 Table 組件, 功能十分強大. 可是想要在裏面渲染一些操做使用的按鈕, 須要用到render 函數, 像這樣:

{
    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">關閉</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');    // 從新請求列表數據
                })
            },
            markFail() {
                this.$http.put(`/jobs/mark/fail/${this.job_id}`).then( response => {
                    this.$Message.success('操做成功');
                    this.$emit('statusUpdated');// 從新請求列表數據
                })
            },
            markClose(){
                this.$http.put(`/jobs/mark/close/${this.job_id}`).then( response => {
                    this.$Message.success('操做成功');
                    this.$emit('statusUpdated');// 從新請求列表數據
                })
            }
        }
    }
</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 了.