鍍金池/ 問(wèn)答/HTML/ 使用iview的表格,使用render插入button按鈕昵?

使用iview的表格,使用render插入button按鈕昵?

使用iview的table,我想在操作那一列插入三個(gè)button,然后他顯示出來(lái)這樣的:

clipboard.png

嘗試了網(wǎng)上的方法不得行,我是直接用的iview的模板,沒(méi)有理解這一段話
“*render 函數(shù)傳入三個(gè)參數(shù) row、column 和 index,分別指當(dāng)前單元格數(shù)據(jù),當(dāng)前列數(shù)據(jù),當(dāng)前是第幾行。
render 函數(shù)本質(zhì)返回的是字符串,Table 組件在內(nèi)部對(duì)其進(jìn)行了編譯,如果使用了自定義組件,需要特別注意上下文,編譯后的自定義組件,默認(rèn)的上下文是 Table 所在的上下文,如果想讓組件在指定的實(shí)例下編譯,可以給 Table 設(shè)置屬性 context 來(lái)指定上下文,比如本例指定當(dāng)前路由頁(yè)為上下文。一般情況不需要此配置,但如果你把 Table 作為一個(gè) slot 封裝在其它組件里,這時(shí) context 屬性就很有用,比如父級(jí)是 $parent,根組件 $root。*”

相關(guān)代碼

這個(gè)是定義的一個(gè)組件,我在父組件調(diào)用他,是不是與那個(gè)context有關(guān)

<template>
    <Table 
        :border="showBorder" 
        :stripe="showStripe" 
        :show-header="showHeader" 
        :height="fixedHeader ? 250 : ''" 
        :size="tableSize" 
        :data="subtabledata" 
        :columns="tableColumns3"
        :highlight-row="true"
        :context="$root"
    >
    </Table>
</template>
<script>
    export default {
        name:"caneditTable",
        props:{
            tabledata:{
                type:Array,
            }
        },
        data () {
            return {
                subtabledata:JSON.parse(JSON.stringify(this.tabledata)),
                showBorder: true,
                showStripe: true,
                showHeader: true,
                showIndex: false,
                showCheckbox: true,
                fixedHeader: false,
                tableSize: 'small',
                
            }
        },
        computed: {
            tableColumns3 () {
                let columns = [];
                if (this.showCheckbox) {
                    columns.push({
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    })
                }
                if (this.showIndex) {
                    columns.push({
                        type: 'index',
                        width: 60,
                        align: 'center'
                    })
                }
                columns.push({
                    title: '新聞標(biāo)題',
                    key: 'title',
                    align: 'center'
                });
                columns.push({
                    title: '標(biāo)題圖片',
                    key: 'pictitle',
                    width: 164,
                    align: 'center'
                });
                columns.push({
                    title: '發(fā)布人',
                    key: 'name',
                    width: 164,
                    align: 'center'
                });
                columns.push({
                    title: '發(fā)布時(shí)間',
                    key: 'time',
                    width: 264,
                    align: 'center'
                });
                columns.push({
                    title: '標(biāo)注',
                    key: 'time',
                    width: 64,
                    align: 'center'
                });
                columns.push({
                    title: '操作',
                    key: 'time',
                    width: 146,
                    align: 'center',
                    render (row, column, index) {
                            return '<Button  type="primary" size="small" @click="show(${index})">查看</> <Button  type="error" size="small" @click="remove(${index})">刪除</>';
                        }
                });
                return columns;
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: '用戶(hù)信息',
                    content: `姓名:${this.data6[index].name}<br>年齡:${this.data6[index].age}<br>地址:${this.data6[index].address}`
                })
            },
            remove (index) {
                this.data6.splice(index, 1);
            }
        }
    }
</script>
 

期待結(jié)果:

clipboard.png

回答
編輯回答
我不懂

已經(jīng)解決了,還是網(wǎng)上大神多,看的這位兄弟的博客,也遇到相同問(wèn)題的,可以看這里在iview的Table中添加Select(render)

2018年9月18日 15:22