vue-table-with-tree-grid实现树形表格+操作

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

首先，先用npm安装vue-table-with-tree-grid，代码如下，

npm i vue-table-with-tree-grid -S

然后在main.js中引入并使用

import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)

然后效果图和代码如下

<template>
  <div class="wrap">
    <zk-table
          ref="table"
          :data="data1"
          :columns="columns"
          :stripe="props.stripe"
          :border="props.border"
          :show-header="props.showHeader"
          :show-summary="props.showSummary"
          :show-row-hover="props.showRowHover"
          :show-index="props.showIndex"
          :tree-type="props.treeType"
          :is-fold="props.isFold"
          :expand-type="props.expandType"
          :selection-type="props.selectionType"
          sum-text="sum"
          index-text="#"
        >
          <template slot="action" scope="scope">
            <span
              style="color:#2d8cf0;"
             
              @click="pre_add(scope.row)"
              >添加</span
            >
            <span>|</span>
            <span @click="pre_edit(scope.row)">修改</span>
            <span>|</span>

            <span @click="del(scope.row)">删除</span>
          </template>
        </zk-table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      props: {
        stripe: false,
        border: true,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false,
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false
      },
      columns:[
        {label: "姓名", align: "left", prop: "name", tree: true },
        {label: "序号", align: "center", prop: "id",  },
        {label: "年龄", align: "center", prop: "age", },
        {label: "性别", align: "center", prop: "sex",  },
        {
          label: "操作",
          align: "center",
          prop: "action",
          template: "action",
          type: "template",
          width: "180px"
        }
      ],
      data1: [
        {
          id:1,
          name:'Jack',
          age:'17',
          sex:'男',
          children:[
            {
              id:12,
              name:'Jack1',
              age:'12',
              sex:'女',
              children:[
                {
                  id:13,
                  name:'Jack10',
                  age:'17',
                  sex:'男'
                },
              ]
            }
          ]
        },
        {
          id:2,
          name:'Jack2',
          age:'17',
          sex:'男'
        },{
          id:3,
          name:'Jack3',
          age:'17',
          sex:'男'
        },{
          id:4,
          name:'Jack4',
          age:'17',
          sex:'男'
        },{
          id:5,
          name:'Jack5',
          age:'17',
          sex:'男'
        },{
          id:6,
          name:'Jack6',
          age:'17',
          sex:'男'
        },{
          id:7,
          name:'Jack7',
          age:'17',
          sex:'男'
        },{
          id:8,
          name:'Jack8',
          age:'17',
          sex:'男'
        },{
          id:9,
          name:'Jack9',
          age:'17',
          sex:'男'
        },
      ],
    }
  },
  methods:{
    pre_edit(e){
      this.$message.success('编辑')
    },
    del(e){
      this.$message.success('删除')
    },
    pre_add(e){
      this.$message.success('添加')

    }
  }
};
</script>

<style lang="less" scoped>
.wrap {
  font-size: 30px;
   /deep/ .zk-table {
      .zk-table__header-wrapper {
        thead {
          .zk-table__header-row {
            height: 48px;
            color: #515a6e;
            font-size: 16px;
            th {
              &:first-child {
                > div {
                  padding-left: 10px;
                }
              }

              &:nth-child(n + 2) {
                > div {
                  padding: 0;
                  // &:not(1){
                  text-align: center;

                  // }
                }
              }
            }
          }
        }
      }
      .zk-table__body-wrapper {
        .zk-table__body {
          tbody {
            .zk-table--empty-row {
              height: 48px;
            }
            .zk-table__body-row {
              font-size: 14px;
              color: #515a6e;
              td {
                > div {
                  span {
                    display: inline-block;
                    height: 40px;
                    // line-height: 40px;
                    display: flex;
                    align-items: center;

                    .zk-table--tree-icon {
                      color: grey;
                      font-size: 16px;

                      // margin-top: 5px;
                    }
                  }
                }
                &:first-child {
                  .zk-table__cell-inner {
                    padding: 6px 6px;
                    .zk-table--level-2-cell {
                      margin-left: 10px !important;
                    }
                    .zk-table--level-3-cell {
                      margin-left: 20px !important;
                    }
                    .zk-table--level-4-cell {
                      margin-left: 30px !important;
                    }
                  }
                }
                &:not(1) {
                  .zk-table__cell-inner {
                    text-align: center;
                    span {
                      margin-left: 0;
                    }
                  }
                }
                &:last-child {
                  > div {
                    padding: 6px 23px;
                    margin: 0 auto;

                    // width: 150px;
                    display: flex;
                    justify-content: flex-end;
                    color: #2d8cf0;
                    span {
                      margin-left: 10px;
                      &:first-child {
                        margin-left: 0;
                      }
                      &:nth-child(odd) {
                        cursor: pointer;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
}
</style>