鍍金池/ 問答/HTML/ 我用的vue.js的easy-table組件,最后一列不想加數(shù)據(jù),是編輯和刪除2

我用的vue.js的easy-table組件,最后一列不想加數(shù)據(jù),是編輯和刪除2個按鈕,應該怎么寫一下

clipboard.png

回答
編輯回答
萢萢糖

看看這個demo

<template>
    <v-table
            is-horizontal-resize
            style="width:100%"
            :columns="columns"
            :table-data="tableData"
            row-hover-color="#eee"
            row-click-color="#edf7ff"
            @on-custom-comp="customCompFunc"
    ></v-table>
</template>

<script>

    import Vue from 'vue'

    export default{
        data() {
            return {
                tableData: [
                        {"name":"趙偉","tel":"156*****1987","hobby":"鋼琴、書法、唱歌","address":"上海市黃浦區(qū)金陵東路569號17樓"},
                        {"name":"李偉","tel":"182*****1538","hobby":"鋼琴、書法、唱歌","address":"上海市奉賢區(qū)南橋鎮(zhèn)立新路12號2樓"},
                        {"name":"孫偉","tel":"161*****0097","hobby":"鋼琴、書法、唱歌","address":"上海市崇明縣城橋鎮(zhèn)八一路739號"},
                        {"name":"周偉","tel":"197*****1123","hobby":"鋼琴、書法、唱歌","address":"上海市青浦區(qū)青浦鎮(zhèn)章浜路24號"},
                        {"name":"吳偉","tel":"183*****6678","hobby":"鋼琴、書法、唱歌","address":"上海市松江區(qū)樂都西路867-871號"}
                     ],
                    columns: [
                        {
                            field: 'custome', title:'序號', width: 50, titleAlign: 'center', columnAlign: 'center',
                            formatter: function (rowData,rowIndex,pagingIndex,field) {
                                return rowIndex < 3 ? '<span style="color:red;font-weight: bold;">' + (rowIndex + 1) + '</span>' : rowIndex + 1
                            }, isFrozen: true,isResize:true
                        },
                        {field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center',isResize:true},
                        {field: 'tel', title: '手機號碼', width: 150, titleAlign: 'center',columnAlign:'center',isResize:true},
                        {field: 'hobby', title: '愛好', width: 150, titleAlign: 'center',columnAlign:'center',isResize:true},
                        {field: 'address', title: '地址', width: 230, titleAlign: 'center',columnAlign:'left',isResize:true},
                        {field: 'custome-adv', title: '操作',width: 200, titleAlign: 'center',columnAlign:'center',componentName:'table-operation',isResize:true}
                    ]

            }
        },
        methods:{
            customCompFunc(params){

                console.log(params);

                if (params.type === 'delete'){ // do delete operation

                    this.$delete(this.tableData,params.index);

                }else if (params.type === 'edit'){ // do edit operation

                    alert(`行號:${params.index} 姓名:${params.rowData['name']}`)
                }

            }
        }
    }

    // 自定義列組件
    Vue.component('table-operation',{
        template:`<span>
        <a href="" @click.stop.prevent="update(rowData,index)">編輯</a>&nbsp;
        <a href="" @click.stop.prevent="deleteRow(rowData,index)">刪除</a>
        </span>`,
        props:{
            rowData:{
                type:Object
            },
            field:{
                type:String
            },
            index:{
                type:Number
            }
        },
        methods:{
            update(){

               // 參數(shù)根據(jù)業(yè)務場景隨意構(gòu)造
               let params = {type:'edit',index:this.index,rowData:this.rowData};
               this.$emit('on-custom-comp',params);
            },

            deleteRow(){

                // 參數(shù)根據(jù)業(yè)務場景隨意構(gòu)造
                let params = {type:'delete',index:this.index};
                this.$emit('on-custom-comp',params);

            }
        }
    })
</script>
2017年7月29日 04:30