vue-cli4.x + ant-design-vue(layout布局的使用 + 数据渲染 + 树型控件 + 分页)

用vue脚手架搭建完成一个项目之后，用npm install ant-design-vue --save安装ant design vue
**

1、layout布局

**
我用的是layout的布局，安装完成后，在main.js中配置一下
官方文档上用一个引入一个，而且还有报错。我就直接全部引入过来了

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import 'ant-design-vue/dist/antd.css'
import Antd from 'ant-design-vue'
import httpRequest from './Util/httpRequest.js'


Vue.prototype.httpRequest = httpRequest

Vue.config.productionTip = false
Vue.use(Antd)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后在Home.vue中（左侧菜单列表时后台返回的，由于太多了，我就暂时写死了部分）

<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo">CY</div>
      <a-menu theme="dark" mode="inline" @select="clickLeftNav">
        <!-- <template v-for="(item) in leftMenuList">
          <a-sub-menu v-if="item.subtitle!=null" :key="item.id">
            <span slot="title"><a-icon type="user" /><span>{{item.title}}</span></span>
            <a-menu-item v-for="(item) in item.subtitle" :key="item.url" :data-url="item.url">
              {{item.menuName}}
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item v-else :key="item.url" :data-url="item.url">{{item.title}}</a-menu-item>
        </template> -->
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="user" /><span>用户信息</span></span>
          <a-menu-item key="1">
            用户列表
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"><a-icon type="money-collect" /><span>充值信息</span></span>
          <a-menu-item key="2">
            充值列表
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <span slot="title"><a-icon type="bank" /><span>公司管理</span></span>
          <a-menu-item key="3">
            员工列表
          </a-menu-item>
          <a-menu-item key="4">
            优惠券发放
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>
      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
      	//主要信息渲染区域
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      leftMenuList: []
    }
  },
  created(){
    this.getLeftMenu()
  },
  methods: {
    clickLeftNav(item, key, selectedKeys){
      console.log(item.key)
      if(item.key === '1'){
        this.$router.push({name: 'userInfo'})
      } else if (item.key === '2') {
        this.$router.push({name: 'chargeList'})
      } else if (item.key === '3'){
        this.$router.push({name: 'employee'})
      } else if (item.key === '4'){
        this.$router.push({name: 'grantCoupon'})
      }
    },
    getLeftMenu(){
      this.httpRequest.httpGetRequest('menuInfo/menuInfo',{
        adminId: 29
      }).then((res) => {
        if(res.data.code == 401){
          this.$router.replace('/')
        }
        if(res.data.code == 20000){
          res.data.data.forEach((item,index) => {
            this.$set(this.leftMenuList,index, {
              id: item.id,
              title: item.menuName,
              subtitle: item.menu,
              url: item.url,
            })
            // console.log(this.leftMenuList)
          })
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
};
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}
.logo{
  font-size: 45px;
  color: #1abc9c;
  height: 60px;
  line-height: 60px;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  font-size: 45px;
  color: #1abc9c;
  height: 60px;
  font-weight: bold;
  line-height: 60px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
  text-align: center;
}
</style>

效果截图：

**

2、数据渲染

**
当请求接口拿到数据后，要展示在页面上，这个时候就要用到table组件了
1、a-spin：一个加载中组件
2、columns：每一列的数据对象，是 columns 中的一项（Array），需要自己配置
3、data-source：需要渲染的数据（Array）
4、pagination：是否显示分页
5、slot-scope中的data就是每一行对应的数据，可以打印一下看看

  <a-spin tip="Loading..." :spinning="isLoading">
      <a-table row-key="id" :columns="columns" :data-source="userList" :pagination="false">
        <span slot="action" slot-scope="text,data">
          <a-button type="primary" @click="clickDetail(data)">详情</a-button>
        </span>
      </a-table>
    </a-spin>

	columns: [
          {
            dataIndex: "ukMobile",
            key: "ukMobile",
            title: "手机号",
          },
          {
            dataIndex: "accountAmount",
            key: "accountAmount",
            title: "充值订单(笔)",
          },
          {
            dataIndex: "gmtCreate",
            key: "gmtCreate",
            title: "注册时间",
          },
          {
            dataIndex: "labelName",
            key: "labelName",
            title: "标签",
          },
          {
            dataIndex: "isVip",
            key: "isVip",
            title: "是否会员",
          },
          {
            dataIndex: "accountMoney",
            key: "accountMoney",
            title: "账户余额",
          },
          {
            dataIndex: "totalPayment",
            key: "totalPayment",
            title: "充值总计",
          },
          {
            dataIndex: "action",
            title: '操作',
            scopedSlots: { customRender: 'action' },
          },
        ]

效果见上图
**

3、树形控件

**
树形控件份好几种，这里我就暂时用到了最普通的和带复选框的
1】、普通展示的
效果图：

1、expanded-keys：（受控）展开指定的树节点
2、selected-keys：设置选中的树节点
3、@expand：展开/收起节点时触发
4、@select：点击树节点触发

<div class="main">
        <div class="manager">
           <a-button type="primary" style="width: 100px">添加公司</a-button>
           <a-tree
            class="tree"
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            :tree-data="companyList"
            @expand="onExpand"
            @select="onSelect"/>
        </div>
        <a-table class="table" row-key="id" :columns="columns" :data-source="employeeList" :pagination="false">
          <span slot="action" slot-scope="text,data">
            <a-button type="primary" @click="clickDetail(data)">详情</a-button>
          </span>
        </a-table>
      </div>

通过@expand和@select这2个事件，我们就能拿到想要的数据了

<script>
  export default {
    data () {
      return {
        employeeList: [],
        isLoading: true,
        companyList: [],
        myData: [],
        autoExpandParent: true,
        selectedKeys: [],
        expandedKeys: ['0'],
        companyName: "",
        gradeName: "",
        employeeName: "",
        mobile: "",
        //列表的id
        id: "",
        userDatas: [],
      }
    },

    mounted() {
      this.getEmployeeList()
      this.getCompanyList()
    },

    methods: {
      // 展开/收起节点时触发
      onExpand(expandedKeys) {
        console.log(expandedKeys)
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      //点击节点时
      onSelect(selectedKeys, info) {
        this.isLoading = true
        console.log(info.node)
        this.selectedKeys = selectedKeys
        let str = info.node.pos;
        let str2 = "-";
        let len = 0;
        let chr0 = str2.charCodeAt(0);
        let that = this;
        let { employeeName, companyName, mobile, userDatas } = this.$data;
        this.employeeName = "";
        this.companyName = "";
        this.gradeName = "";
        this.mobile = "";
        for (let i = 0; i < str.length; i++) {
            let c = str.charCodeAt(i)
            if (c == chr0) {
                len++;
            }
        }
        switch (len) {
            case 1:
                this.companyName = info.node.dataRef.title;
                this.$data.userloading = true;
                break;
            case 2:
                this.gradeName = info.node.dataRef.title;
                break;
            case 3:
                this.employeeName = info.node.dataRef.title;
                break;
        }
        this.getEmployeeList(this.current,this.size,mobile,this.gradeName,this.employeeName,this.companyName)
      },
      //遍历树形数组
      setTreeData(myData) {
        for (var i in myData) {
          myData[i].title = myData[i].name
          myData[i].key = myData[i].id
          myData[i].children = myData[i].companyOrganizationVos
          myData[i].scopedSlots = { title: "custom" }
          if (myData[i].companyOrganizationVos) {
            this.setTreeData(myData[i].companyOrganizationVos)
          }
        }
      },
      //获取公司列表
      getCompanyList(){
        this.httpRequest.httpGetRequest("company/organization").then((res) => {
          if (res.data.code == 20000) {
            this.myData = res.data.data
            this.setTreeData(this.myData)
            this.companyList = this.myData
          }
        })
      },
      //获取公司职员列表
      getEmployeeList(current,size,mobile,gradeName,employeeName,companyName) {
        this.httpRequest
          .httpGetRequest("employee/queryEmployee", {
            current: current ? current : 1,
            size: size ? size : 10,
            mobile: mobile ? mobile : '',
            gradeName: gradeName ? gradeName : '',
            employeeName: employeeName ? employeeName : '',
            companyName: companyName ? companyName : ''
          })
          .then((res) => {
            if (res.data.code == 20000) {
              setTimeout(() => {
                this.isLoading = false
              }, 500)
              this.employeeList = res.data.data.records
            }
            if (res.data.code == 20001) {
              setTimeout(() => {
                this.isLoading = false
              }, 500)
            }
          })
      },
    }
  }

</script>

2】、带checkbox的

<template>
  <div class="container">
      <a-tree
        class="tree"
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="companyList"
        :checkedKeys="checkedKeys"
        @expand="onExpand"
        @check="onCheck"
        checkable
        @select="onSelect"/>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        companyList: [],
        selectedKeys: [],
        companyName: "",
        gradeName: "",
        employeeName: "",
        mobile: "",
        //列表的id
        id: "",
        expandedKeys: [], //展开节点的值
        selectedKeys: ["0"], //选中节点的值
        checkedKeys: [], //checked节点的值
        autoExpandParent: true, //是否自动展开
        companyId: "", //选中节点的公司id
        departmentId: "", //选中节点的部门id
        memberId: [], //选中节点的人员id
        myData: [], //设置公司树形结构的中间数据
        validScope: ["5"], //适用范围
        totalMoney: "", //发放金额
        issueDate: [], //发放时间
      }
    },
    mounted() {
        this.getCompanyList()
    },

    methods: {
      onSelect(selectedKeys, info){

      },
      //展开节点
      onExpand(expandedKeys, info) {
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      //选中节点时
      onCheck(checkedKeys, info){
        console.log(checkedKeys, info)//这里是获取到的数据，在这里进行数据处理
      },
      //获取公司列表
      getCompanyList(){
        this.httpRequest.httpGetRequest("company/organization").then((res) => {
          if (res.data.code == 20000) {
            this.myData = res.data.data
            this.setTreeData(this.myData)
            this.companyList = this.myData
          }
        })
      },
      //遍历树形数组
      setTreeData(myData) {
        for (var i in myData) {
          myData[i].title = myData[i].name
          myData[i].key = myData[i].id
          myData[i].children = myData[i].companyOrganizationVos
          myData[i].scopedSlots = { title: "custom" }
          if (myData[i].companyOrganizationVos) {
            this.setTreeData(myData[i].companyOrganizationVos)
          }
        }
      },
    }
  }

</script>
<style scoped>
    .container{
        width: 100vw;
        height: 100%;
    }
</style>

**

4、分页

**

1、show-quick-jumper：是否显示跳转到哪一页
2、page-size-options：指定每页可以显示多少条
3、total：总页数
4、page-size：每页条数
5、show-size-changer：是否显示xx条/每页
6、@change：页码改变的回调，参数是改变后的页码及每页条数
7、@showSizeChange：选择每页显示多少条

    <a-pagination
          v-model="current"
          show-quick-jumper
          show-less-items
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :page-size="pageSize"
          @change="pageChange"
          @showSizeChange="onShowSizeChange">
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>

将每页显示多少条、当前页传给后台

//每页显示多少条
      onShowSizeChange(current, size) {
        this.isLoading = true
        this.pageSize = size
        this.current = current
        this.getChargeList(this.current,this.pageSize)
        
      },
      //当前页改变时
      pageChange(page, pageSize) {
        this.isLoading = true
        this.pageSize = pageSize
        this.current = page
        this.getChargeList(this.current,this.pageSize)
      },