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 了.