原介面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>

資料例子

表頭

行資料