vue树形表格的做法

小白探索世界欧耶！~

已于 2023-02-17 14:37:30 修改

阅读量894

点赞数 1

分类专栏： Vue 杂七杂八文章标签： vue.js elementui javascript

于 2022-11-28 10:45:38 首次发布

本文链接：https://blog.csdn.net/Vivien_CC/article/details/128075556

版权

Vue 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

杂七杂八

26 篇文章 0 订阅

订阅专栏

效果：

做法：

<template>
  <el-table :data="menuTreeList" max-height="100%" height="calc(100% - 20px)" row-key="businessKey"
    @selection-change="handleSelectionChange" ref="multipleTable" border>
    <el-table-column prop="businessCode" label="事业群编码"></el-table-column>
    <el-table-column prop="businessName" label="事业群名称"></el-table-column>
    <el-table-column prop="currencyCode" label="币种"></el-table-column>
    <el-table-column prop="businessName" label="状态">
      <template slot-scope="scope">
        <span>{{ scope.row.status == 1 ? '未启用' : (scope.row.status == 2 ? '启用' : '停用') }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="version" label="版本"></el-table-column>
    <el-table-column prop="createdBy" label="创建人"></el-table-column>
    <el-table-column prop="updatedBy" label="修改人"></el-table-column>
    <el-table-column prop="description" label="备注"></el-table-column>
    <el-table-column label="操作" width="120">
      <template slot-scope="scope">
        <slot name="table-work" :item="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    menuTreeList: { type: Array, default: () => [] }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  created() {
  },
  methods: {
    handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log("已选中：",this.multipleSelection)
      }
  }
}
</script>

<style lang="scss" scoped>
.tree-menu {
  height: calc(100% - 50px);
}

/deep/.ans-table .table-header-row {
  background: none;
}

.menu /deep/.el-table .el-table__cell {
  padding: 4px 0;
}

.menu /deep/.el-table th.el-table__cell>.cell {
  font-size: 12px;
  color: #555;
  border-top: 1px solid #ebeef5;
  padding-top: 10px;
}

.menu /deep/.el-table td.el-table__cell>.cell {
  font-size: 12px;
  color: #666;
}
</style>

      <v-tree :menu-tree-list="tableData">
        <template slot="table-work" slot-scope="props">
            <el-button class="prohibitclick" @click="editRow(props.item)" type="text" size="small">编辑</el-button>
            <el-button class="prohibitclick" @click="deleteRow(props.item)" type="text" size="small">删除</el-button>
          </template>
      </v-tree>

数据结构：

{
  "businessTeamKey": "134",
  "businessTeamCode": "TM0112",
  "businessTeamName": "哈哈哈",
  "description": "测试测试",
  "businessGroupCode": "20",
  "businessUnitCode": "BU0101",
  "parentBusinessTeamCode": "",
  "lastStage": 0,
  "businessTeamFunction": "3",
  "businessTeamType": 3,
  "status": 2
  "children": [
    {
      "businessTeamKey": "160",
      "businessTeamCode": "TM哈哈哈0009",
      "businessTeamName": "哈哈哈",
      "description": "",
      "businessGroupCode": "20",
      "businessUnitCode": "BU0101",
      "parentBusinessTeamCode": "TM0112",
      "lastStage": 1,
      "businessTeamFunction": "3",
      "businessTeamType": 3,
      "status": 2
    },
    {
      "businessTeamKey": "159",
      "businessTeamCode": "TM哈哈哈0008",
      "businessTeamName": "哈哈哈",
      "description": "",
      "businessGroupCode": "20",
      "businessUnitCode": "BU0101",
      "parentBusinessTeamCode": "TM0112",
      "lastStage": 1,
      "businessTeamFunction": "3",
      "businessTeamType": 3,
      "status": 2
    },
    {
      "businessTeamKey": "163",
      "businessTeamCode": "TM0012",
      "businessTeamName": "哈哈哈",
      "description": "",
      "businessGroupCode": "20",
      "businessUnitCode": "BU0101",
      "parentBusinessTeamCode": "TM0112",
      "lastStage": 1,
      "businessTeamFunction": "3",
      "businessTeamType": 3,
      "status": 2
    },
    {
      "businessTeamKey": "161",
      "businessTeamCode": "TM哈哈哈0010",
      "businessTeamName": "哈哈哈",
      "description": "",
      "businessGroupCode": "20",
      "businessUnitCode": "BU0101",
      "parentBusinessTeamCode": "TM0112",
      "lastStage": 1,
      "businessTeamFunction": "3",
      "businessTeamType": 3,
      "status": 2
    },
    {
      "businessTeamKey": "162",
      "businessTeamCode": "TM哈哈哈0011",
      "businessTeamName": "哈哈哈",
      "description": "",
      "businessGroupCode": "20",
      "businessUnitCode": "BU0101",
      "parentBusinessTeamCode": "TM0112",
      "lastStage": 1,
      "businessTeamFunction": "3",
      "businessTeamType": 3,
      "status": 2
    }
  ]
}