Element UI 樹形表格

1.結構

<!-- 表格 -->
    <div class="table-con">
        <div class="clearfix search-bar">
            <div class="fl">
                <el-input v-model="serviceName" placeholder="請輸入服務名稱"></el-input>
            </div>
            <div class="fl">
                <el-select v-model="serviceRoleId" placeholder="請選擇服務角色">
                  <el-option v-for="item in serviceRole" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
            </div>
            <div class="fl">
                <el-select v-model="serviceTypeId" placeholder="請選擇服務類型">
                  <el-option v-for="item in serviceType" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
            </div>
            <div class="fl">
                <el-button type="primary" @click="getPermissionList">查詢</el-button>
                <el-button type="primary" @click="addService">新增服務</el-button>
                <!-- <el-button type="primary" @click="batchDeleteService">批量刪除</el-button> -->
            </div>
        </div>
        <el-table ref="serviceList" border :data="serviceList" tooltip-effect="dark" style="width: 100%" class="serviceList" @selection-change="multiSelect" :row-class-name="rowClassNameHandler">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="名稱" width="200" align="left">
                <template slot-scope="scope">
                    <span :style="{marginLeft: scope.row.level * 23 + 'px'}">&ensp;</span>
                    <i v-if="scope.row.showChildren" :class="{'el-icon-folder-opened':scope.row.showChildren, 'el-icon-tickets':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}" ></i>
                    <i v-else :class="{'el-icon-folder':scope.row.hasChildren, 'el-icon-tickets':!scope.row.hasChildren}" @click="onExpand(scope.row)" :style="{cursor:scope.row.hasChildren ? 'pointer' : 'normal'}" ></i>
                    <span :data-level="scope.row.level" :style="{marginLeft: 4 + 'px'}">{{ scope.row.name }}</span>

                </template>
            </el-table-column>
            <el-table-column prop="icon" label="圖標" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <img class="icon-img" :src="scope.row.icon" alt="圖標">
                </template>
            </el-table-column>
            <el-table-column prop="permissionTypeName" label="類型" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="permission" label="權限碼" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="roleName" label="使用角色" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="所屬系統" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.sysId == 1">信息發佈系統</span>
                        <span v-else>OA</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="url" label="地址" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="desc" label="備註信息" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="操做" align="center"> 
                <template slot-scope="scope">
                    <div>
                        <p>
                            <el-button @click="addChildrenService(scope.row)" type="text" size="small">新增子服務</el-button>
                        </p>
                        <el-button @click="modifyService(scope.row)" type="text" size="small">修改</el-button>
                        <el-button @click="deleteService(scope.row)" type="text" size="small">刪除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分頁 -->
        <!-- <div style="text-align: center;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="listTotal"> </el-pagination> </div> -->
    </div>
複製代碼

2.方法

<script>
import { permissionAllList } from '@/request/api';
export default {
    name: 'serviceApplication',
    data() {
      return {
          serviceName: '',        //搜索服務名稱
          serviceRoleId: '',      //服務角色id
          serviceTypeId: '',      //服務類型id
          serviceList: [],        //全部服務列表
          currentPage: 1,         //當前頁
          pageSize: 10,           //每頁的數量
          listTotal: 0,           //總頁數
          allSelectedItems: [],   //多選數據
          
      }
    },
    mounted() {
        this.getPermissionList();
    },
    methods: {
        //獲取全部服務列表
        getPermissionList() {
            let param = {
                name: this.serviceName,
                roleId: this.serviceRoleId,
                typeId: this.serviceTypeId,
                // pageNum: this.currentPage,
                // pageSize: this.pageSize
            }
            permissionAllList(param).then(res => {
                if(res.code == 0){
                    // console.log(res)
                    let result = res.data;
                    let resultArr = this.processLevelServiceList(result)
                    this.serviceList = resultArr;
                    this.listTotal = res.data.total;
                }else{
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    })
                }
            })
        },
        //分頁方法
        handleSizeChange(val) {
            console.log(`每頁 ${val} 條`);
        },
        handleCurrentChange(val) {
            console.log(`當前頁: ${val}`);
            this.getPermissionList();
        },
        //服務應用數據處理
        processLevelServiceList(dataArray) {
            let that = this
            let resultArray = [] // 一級欄目
            let level = 1
            for (let i = 0; i < dataArray.length; i++) {
                let item = dataArray[i]
                // 查找一級分類
                if (item.parentId === 0) {
                    item['level'] = level
                    resultArray.push(item)
                    that.findChildrenData(resultArray, dataArray, item, level + 1)
                }
            }
            return resultArray
        },
        //查找子節點數據
        findChildrenData(resultArray, originArray, item, level){
            let that = this

            let deployed = 0
            let undeployed = 0
            let edit = 0
            let completed = 0

            for (let i = 0; i < originArray.length; i++) {
                let originItem = originArray[i]
                // 判斷是不是item項的子項
                if (originItem.parentId === item.id) {
                    item['hasChildren'] = true
                    item['showChildren'] = false

                    originItem['level'] = level
                    originItem['visible'] = false // 子項默認隱藏
                    originItem['hiddenByCategory'] = false

                    resultArray.push(originItem)
                    that.findChildrenData(
                        resultArray,
                        originArray,
                        originItem,
                        level + 1
                    )

                    // 應該放在統計完子類數據以後
                    deployed += originItem.deployed
                    undeployed += originItem.undeployed
                    edit += originItem.edit
                    completed += originItem.completed
                }
            }
            // 計算子欄目統計合計
            item.deployed += deployed
            item.undeployed += undeployed
            item.edit += edit
            item.completed += completed
        },
        //點擊展開
        onExpand(row) {
            let that = this
            let isShowChildren = !row['showChildren']
            row['showChildren'] = isShowChildren
            that.showAllSubItems(row, true, isShowChildren)
        },
        //展現全部子類數據
        showAllSubItems(item, isFirstLevlChildren, isShowChilren){
            let that = this
            let dataArray = []
            for (let i = 0; i < that.serviceList.length; i++) {
                let tempItem = that.serviceList[i]
                if (tempItem.parentId === item.id) {
                    if (isFirstLevlChildren) {
                        tempItem['visible'] = !tempItem['visible']
                    }
                    tempItem['hiddenByCategory'] = !isShowChilren

                    dataArray.push(tempItem)
                    let subItemArray = that.showAllSubItems(
                        tempItem,
                        false,
                        isShowChilren
                    )
                    dataArray = dataArray.concat(subItemArray)
                }
            }
            return dataArray
        },
        //子類數據添加類名隱藏
        rowClassNameHandler({ row, rowIndex }) {
            let className = 'pid-' + row.parentId
            if (
                row.parentId !== 0 &&
                (row['visible'] !== true || row['hiddenByCategory'] === true)
            ) {
                className += ' hiddenRow'
            }
            return className
        },
        //多選
        multiSelect(val) {
            this.allSelectedItems = val
        }
    }

}

</script>
複製代碼

3.樣式

<style>
    .table-con .hiddenRow {    display: none;}
</style>
複製代碼

注: 樣式不要寫scoped!

4.數據

數據中應有字段: 父節點id: parentId; 該節點的id: id