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

原界面bootstrap+jQuery实现

新界面vue+element

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

待优化

代码

<!--有部门权限----------------------------------------------------------------------------->
<!--                              v-if="item.fun_use_role.cols.length>1"  列大于1的才显示  数据中有1个多余的数据-->
<el-table 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"

>
    <!--第一列锁定:fixed="index_col===0"-->
    <el-table-column
            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
    >
        <template slot-scope="scope">
            <span>{{ scope.row[index_col].text }}</span><!--第一列只显示部门名称-->
        </template>
    </el-table-column>
    <!--v-if="col.children.length===0 "  只显示 没有动作功能的"-->
    <el-table-column
            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"
    >
        <template slot-scope="scope">
            <div align="center">
                <!--随后的列显示checkbox-->
                <el-checkbox align="center"
                             v-model="scope.row[index_col].ischecked"
                             :key="scope.row[index_col].urladd"
                >
                    <!-- {{scope.row[index_col].urladd}}-->
                </el-checkbox>
            </div>
        </template>
    </el-table-column>


    <!--显示有动作功能的"-->
    <el-table-column
            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 "

    >
        <!--嵌套实现多表头-->
        <el-table-column
                header-align="center"
                v-for="(children,index_children) in col.children"
                :label="children.title"
                :key="children.title"

        >
            <template slot-scope="scope">
                <!--随后的列显示checkbox-->
                <div align="center">
                    <el-checkbox align="center"
                                 v-model="scope.row[index_col].children[index_children].ischecked"
                                 :key="scope.row[index_col].children[index_children].urladd"
                    > <!--{{scope.row[index_col].children[index_children].urladd}}
                    数据和表头嵌套一样也是二级数组实现
                    -->
                    </el-checkbox>
                </div>
            </template>
        </el-table-column>
    </el-table-column>
</el-table>

数据例子

表头

行数据