基于element-ui封装table的操作项

现在的问题是

这里的操作项可能过多，产品要求操作项大于3个时，就显示第一个，其他的在“更多”中显示, 最终效果为

，同时，该按钮以后是要做权限控制的。

实现： 先判断权限（默认存在），再判断存在条件（默认为真），然后生成一个新的遍历数据列表 结构体: { label: clickFun:

    }，
    最后处理操作按钮过多的问题

代码如下： 父级： 父级data:

    operation:{
        label: "操作",
        value: "",
        id: 17,
        width:300,
        align:'center',
        operate:[
          {
            name:'isExamine',
            clickFun:this.clickFun3,
            formatOperate:res=>{
              return res==0?'修改':null
            }
          },
          {
            name:'明细',
            clickFun:this.clickFun2,
          },
          {
            clickFun:this.clickFun1,
            formatParent:res=>{
              return res.status==0&&res.isExamine==1?'启用':null
            }
          },
        
        ]
    },

子组件

<template>
    <div>
        <span v-for="(v,index) of showlist" :key="index" class="span_sty" @click="handleClick(v)">
            <span v-if="!v.isMore">{{ v.label }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <el-dropdown v-if="v.isMore" @command="handleClick">
                <span class="span_sty">{{ v.label }}</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(v1,index1) of morelist" :key="index1" :command="v1">{{v1.label  }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </span>
    </div>
</template>

<script>
    export default {
        name:'cao_z_component',
        props: {
            operation:{
                type:Object,
            },
            data_row:{
                type:Object
            }
        },
        data(){
            return {
                i:0,
                operate:[],
                operate_list:[],
                showlist:[],
                morelist:[]
            }
        },
        mounted(){
            this.handle_date()
        },
        methods:{
            // 先判断权限（默认存在），再判断存在条件（默认为真），然后生成一个新的遍历数据列表
            // 结构体: {
                // label:
                // clickFun:
            // }
            handle_date(){
                this.operate=this.operation&&this.operation.operate&&this.operation.operate.length?this.operation.operate:[]
                let list=[]
                this.operate.map(v=>{
                    let label=''
                    // 判断权限(默认为真)
                    if (v.formatShow instanceof Function && !v.formatShow()) {
                        return 
                    }
                    // 判断存在条件（默认为真）
                    if(v.formatOperate instanceof Function){
                        if(v.name&&!v.formatOperate(this.data_row[v.name])){
                            return 
                        }
                        label=v.formatOperate(this.data_row[v.name])
                    }
                    if(v.formatParent instanceof Function){
                        if(!v.formatParent(this.data_row)){
                            return 
                        }
                        label=v.formatParent(this.data_row)
                    }
                    // 生成
                    list.push({
                        label:label||v.name,
                        clickFun:v.clickFun
                    })
                })
                this.operate_list=list
                // 处理操作按钮过多的问题
                this.handle_more()
            },
            handle_more(){
                this.showlist=[]
                this.morelist=[]
                if(this.operate_list.length>2){//大于3个就显示更多,显示更多时，默认显示第一个
                    this.showlist.push(...[this.operate_list[0],{
                        label:'更多',
                        isMore:true,
                        clickFun:()=>{}
                    }])
                    this.morelist=this.operate_list.slice(1,this.operate_list.length)
                    return 
                }
                this.showlist=this.operate_list
            },
            // 绑定事件，传数据进去
            handleClick(v){
                v.clickFun(this.data_row)
            },
        }
    }
</script>

<style scoped lang="scss">
    .span_sty{
        color: #3a70f7;
    }
</style>