美文网首页
vue+element UI实现树形表格

vue+element UI实现树形表格

作者: 若水亦城空 | 来源:发表于2020-03-30 15:58 被阅读0次

    https://www.jianshu.com/p/d38f2857bb5b

    一:在component文件夹下新建如下treeTable文件夹,里面有2个文件:

    eval.js:将数据转换成树形数据

    
    import Vue from 'vue'
    export default function treeToArray(data, expandAll, parent = null, level = null) {
      let tmp = []
      Array.from(data).forEach(function(record) {
        if (record._expanded === undefined) {
          Vue.set(record, '_expanded', expandAll)
        }
        let _level = 1
        if (level !== undefined && level !== null) {
          _level = level + 1
        }
        Vue.set(record, '_level', _level)
        // 如果有父元素
        if (parent) {
          Vue.set(record, 'parent', parent)
        }
        tmp.push(record)
        if (record.children && record.children.length > 0) {
          const children = treeToArray(record.children, expandAll, record, _level)
          tmp = tmp.concat(children)
        }
      })
      return tmp
    }
    
    

    TreeTable.vue:树形表格组件

    <template>
     <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
       <el-table-column v-if="columns.length === 0" width="150">
         <template slot-scope="scope">
           <span
             v-for="space in scope.row._level"
             :key="space"
             class="ms-tree-space"
           ></span>
           <span
             v-if="iconShow(0, scope.row)"
             class="tree-ctrl"
             @click="toggleExpanded(scope.$index)"
           >
             <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
             <i v-else class="el-icon-minus"></i>
           </span>
           {{ scope.$index }}
         </template>
       </el-table-column>
       <el-table-column
         v-for="(column, index) in columns"
         v-else
         :key="column.value"
         :label="column.text"
         :width="column.width"
       >
         <template slot-scope="scope">
           <span v-if="index === 0">
             <span
               v-for="space in scope.row._level"
               :key="space"
               class="ms-tree-space"
             ></span>
           </span>
           <span
             v-if="iconShow(index, scope.row)"
             class="tree-ctrl"
             @click="toggleExpanded(scope.$index)"
           >
             <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
             <i v-else class="el-icon-minus"></i>
           </span>
           {{ scope.row[column.value] }}
         </template>
       </el-table-column>
       <el-table-column
         align="center"
         width="300"
         label="操作">
         <template slot-scope="scope">
           <el-button type="text" @click="itemClick(scope.row,1)">查看</el-button>
           <el-button type="text" @click="itemClick(scope.row,2)">设置</el-button>
           <el-button type="text" @click="itemClick(scope.row,3)">添加子机构</el-button>
         </template>
       </el-table-column>
       <slot />
     </el-table>
    </template>
    
    <script>
    import treeToArray from "./eval.js";
    export default {
     name: "TreeTable",
     props: {
       /* eslint-disable */
         data: {
           type: [Array, Object],
           required: true
         },
         columns: {
           type: Array,
           default: () => []
         },
         evalFunc: Function,
         evalArgs: Array,
         expandAll: {
           type: Boolean,
           default: false
         }
       },
       computed: {
         // 格式化数据源
         formatData: function() {
           let tmp;
           if (!Array.isArray(this.data)) {
             tmp = [this.data];
           } else {
             tmp = this.data;
           }
           const func = this.evalFunc || treeToArray;
           const args = this.evalArgs
           ? Array.concat([tmp, this.expandAll], this.evalArgs)
           : [tmp, this.expandAll];
           return func.apply(null, args);
         }
       },
       methods: {
         itemClick: function(row,value){
           this.$emit('parnet-click',row,value);
         },
         showRow: function(row) {
           const show = row.row.parent
           ? row.row.parent._expanded && row.row.parent._show
           : true;
           row.row._show = show;
           return show
           ? {animation:"treeTableShow 1s;-webkit-animation:treeTableShow 1s"}
         :
           {
             display:"none"
           }
         },
         // 切换下级是否展开
         toggleExpanded: function(trIndex) {
           const record = this.formatData[trIndex];
           record._expanded = !record._expanded;
         },
         // 图标显示
         iconShow(index, record) {
           return index === 0 && record.children && record.children.length > 0;
         }
       }
     };
    </script>
    <style rel="stylesheet/css">
     @keyframes treeTableShow {
       from {
         opacity: 0;
       }
       to {
         opacity: 1;
       }
     }
     @-webkit-keyframes treeTableShow {
       from {
         opacity: 0;
       }
       to {
         opacity: 1;
       }
     }
    </style>
    
    <style scoped>
     .ms-tree-space {
       position: relative;
       top: 1px;
       display: inline-block;
       font-style: normal;
       font-weight: 400;
       line-height: 1;
       width: 18px;
       height: 14px;
     }
     .ms-tree-space::before {
       content: "";
     }
     .processContainer {
       width: 100%;
       height: 100%;
     }
     table td {
       line-height: 26px;
     }
     .tree-ctrl {
       position: relative;
       cursor: pointer;
       color: #2196f3;
       margin-left: -18px;
     }
    </style>
    

    二:在需要的地方引入该组件:
    例如:在component文件夹下新建home.vue:

    <template>
      <tree-table :data="data1" :columns="columns1" v-on:parnet-click="handleClick" border />
    </template>
    <script>
    import treeTable from "./TreeTable";
    export default {
      name: "LoginForm",
      data() {
        return {
          columns: [
            {
              text: "机构名称",
              value: "departmentName",
              align: "left"
            },
            {
              text: "机构类型",
              value: "departmentType"
            },
            {
              text: "机构描述",
              value: "description"
            },
            {
              text: "修改时间",
              value: "modifyTime"
            }
          ],
          data: [
            {
              id: 1,
              parentId: 0,
              departmentName: "测试1",
              departmentType: 18,
              description: "男",
              modifyTime: "2019-10-10",
              children: [
                {
                  id: 2,
                  parentId: 1,
                  departmentName: "测试2",
                  departmentType: 22,
                  description: "男",
                  modifyTime: "2019-10-10"
                }
              ]
            },
            {
              id: 3,
              parentId: 0,
              departmentName: "测试3",
              departmentType: 23,
              description: "女",
              modifyTime: "2019-10-10",
              children: [
                {
                  id: 4,
                  parentId: 3,
                  departmentName: "测试4",
                  departmentType: 22,
                  description: "男",
                  modifyTime: "2019-10-10"
                },
                {
                  id: 5,
                  parentId: 3,
                  departmentName: "测试5",
                  departmentType: 25,
                  description: "男",
                  modifyTime: "2019-10-10"
                },
                {
                  id: 6,
                  parentId: 3,
                  departmentName: "测试6",
                  departmentType: 26,
                  description: "女",
                  modifyTime: "2019-10-10",
                  children: [
                    {
                      id: 7,
                      parentId: 6,
                      departmentName: "测试7",
                      departmentType: 27,
                      description: "男",
                      modifyTime: "2019-10-10"
                    }
                  ]
                }
              ]
            },
            {
              id: 18,
              parentId: 0,
              departmentName: "测试8",
              departmentType: 18,
              description: "男"
            }
          ]
        };
      },
      components: { treeTable },
      computed: {},
      mounted() {
      },
      methods: {
        // 表格后面的点击事件
          handleClick(row, type) {
               console.log(row, type);
          },
      }
    };
    </script>
    <style lang="less" scoped>
    </style>
    

    相关文章

      网友评论

          本文标题:vue+element UI实现树形表格

          本文链接:https://www.haomeiwen.com/subject/qoyvuhtx.html