el-table多表头-动态列-在后台管理系统权限分配中的实现

原界面bootstrap+jQuery实现

新界面vue+element

利用element的表格实现,目前代码展示没有原来的PHP直接呈现的时候快,原因应该是页面一次性展示元素太多造成的

待优化

代码

stripe border fit highlight-current-row
          :data="item.fun_use_role.tableData"
          style="width: 100%;margin-top: 20px"
          v-if="item.fun_use_role.cols.length>1"
          height="500"
          size="mini"

>
    
                header-align="center"
            v-for="(col,index_col) in item.fun_use_role.cols"
            :label="col.title"
            :fixed="true"
            :key="col.title"
            v-if="index_col===0"
            width="180" show-overflow-tooltip
    >
        
    
    
                header-align="center"
            v-for="(col,index_col) in item.fun_use_role.cols"
            :label="col.title"
            :key="col.title"
            v-if="col.children.length===0&&index_col>0"
    >
        
    


    
                header-align="center"
            v-for="(col,index_col) in item.fun_use_role.cols"
            :label="col.title"
            :key="col.title"
            v-if="col.children.length>0 "

    >
        
                        header-align="center"
                v-for="(children,index_children) in col.children"
                :label="children.title"
                :key="children.title"

        >
            
        
    

数据例子

表头

行数据