vue-admin-template笔记（四）

Vue学习笔记（四）

学习vue-admin-template
https://github.com/PanJiaChen/vue-admin-template

上一篇中分析了vue-admin-template的入口逻辑，包括main.js, App.vue, router。这篇根据router来分析下其他的页面。
下面是一部分路由代码，也是这篇要分析的页面，表格和树形菜单结构。

{
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: 'Tree', icon: 'tree' }
      }
    ]
  },

tree

<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

    <el-tree
      ref="tree2"
      :data="data2"    //需要展示的数据
      :props="defaultProps"   // 配置选项
      :filter-node-method="filterNode"   // 过滤节点的过滤方法
      class="filter-tree"  // 过滤树形节点
      default-expand-all    // 默认都展开
    />

  </div>
</template>

<script>
export default {

  data() {
    return {
      filterText: '',
      data2: [{
        id: 1,
        label: 'Level one 1',
        children: [{
          id: 4,
          label: 'Level two 1-1',
          children: [{
            id: 9,
            label: 'Level three 1-1-1'
          }, {
            id: 10,
            label: 'Level three 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: 'Level one 2',
        children: [{
          id: 5,
          label: 'Level two 2-1'
        }, {
          id: 6,
          label: 'Level two 2-2'
        }]
      }, {
        id: 3,
        label: 'Level one 3',
        children: [{
          id: 7,
          label: 'Level two 3-1'
        }, {
          id: 8,
          label: 'Level two 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)   // 每次该值变化，就触发树形组件的过滤方法，即下面的filterNode方法
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true   // 如果输入为空，则所有节点都展示
      return data.label.indexOf(value) !== -1  //如果节点名字含有该value，则展示
    }
  }
}
</script>

小结：

1. 纯粹的tree组件使用样例，参考element-ui官方文档
   tree组件

table

<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"   // Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。
      :data="list"
      element-loading-text="Loading"  // 在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="Title">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="Author" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Pageviews" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.pageviews }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList(this.listQuery).then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    }
  }
}
</script>

api/table.js

import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/table/list',
    method: 'get',
    params
  })
}

新术语解释：

1. slot

   vue里承载分发内容的出口。实际上它就是一个空壳子，它显示与否以及怎么显示完全是由父组件来控制。不过，插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。共有三类插槽：

   1. 默认插槽：默认父组件传递过来的内容展示区
   2. 具名插槽：默认插槽只有一个，如果需要多个插槽，则可以定义多个具名插槽
   3. 作用域插槽：这个插槽比较特殊，它的数据来自自己，上面两个插槽的数据和展示格式都是来自父组件，这个插槽的数据可以来自自己，常被用于列表和表格中，如上面代码所示

   参考

   1. 深入理解vue中的slot与slot-scope
   2. vue 组件内容分发slot

2. filters

   可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

   参考

   1. 过滤器

小结：

1. 纯粹的table组件的样例，还要loading组件的使用，都比较简单
   table组件
   loading组件

总结

本篇笔记主要是记录了一下vue-admin-template里关于tree和table组件的使用样例说明，其中tree和table组件，参考element-ui里的文档即可。本篇笔记中最重要的是理解slot的作用，它就是一个内容占位符，当需要动态展示某些数据的时候，可以向其赋予不同的值。

参考

1. tree组件
2. 深入理解vue中的slot与slot-scope
3. vue 组件内容分发slot
4. table组件
5. loading组件