AJ-Report项目源码分析（2）

2021SC@SDUSC

本次分析的是src/views/accessAuthority/index.vue的部分源码，这是权限管理模块页面的源码，页面如下：

下面开始源码分析

  <anji-crud ref="listPage" :option="crudOption">
    <template v-slot:buttonLeftOnTable> </template>

  </anji-crud>

这段代码是页面展示的关键，template是vue中组件注册的关键字，此组件没有使用id来指定展示哪个组件，而是使用具名插槽v-slot来指定内容。anji-crud 是自定义的的组件名称，:option属性指定了下面代码中data()属性的crudOption数据。

这个页面所有数据都来源于crudOption中的数据。

anji-crud所在路径为src/components/AnjiPlus/anji-crud/anji-crud.vue，这个组件很重要，是很多页面的基础框架，我们来看一下anji-crud.vue的源码：

<template>
  <div :class="[hasTreeFieldInQueryForm ? 'page-container' : 'app-container']">

这里使用了三目表达式，hasTreeFieldInQueryForm是一个方法，用于检查查询条件（在本文开始的截图中有根据条件查询的按钮）里面是否有树形控件，如果有就使用class为page-container的css属性，如果没有就使用名称为app-container的css样式，此方法具体如下：

  hasTreeFieldInQueryForm() {
      return this.isNotBlank(this.queryFormTreeField)
    },

isNotBlank方法源码如下：

 isNotBlank (val) {
      return !this.isBlank(val)
    },

isBlank方法源码如下：

   isBlank (val) {
      if (typeof val === 'undefined') {
        return true
      }
      if (val == null || val === '') {
        return true
      }
      return false
    },

连续调用三个方法，我们可以看出来最终目的是为了判断this.queryFormTreeFiled是否为空，为空则代表没有树形控件。

接下来代码如下：

 <div v-if="hasTreeFieldInQueryForm" class="left-container">
      <AnjiTree ref="queryFormTree" v-model.trim="queryParams[queryFormTreeField.field]"
                :is-open="queryFormTreeField.anjiTreeOption.isOpen"
                :enable-filter="queryFormTreeField.anjiTreeOption.enableFilter"
                :label-name="queryFormTreeField.label" :url="queryFormTreeField.anjiTreeOption.url"
                @node-click="handleTreeNodeCheck" />
</div>

这个div通过v-if来控制自己是否显示，在queryFormTreeFiled不为空的时候才会显示。

接下来的代码就是查询表单的开始了，我们在页面截图中也可以看出来。按钮和input输入框没什么好说的，但是代码中的下拉框没有使用element-ui自带的下拉框，而是使用了自定义的一个组件，如下：

anji-select源码中很多数据都是空数据：

此下拉列表属性源码如下：

  <el-select
      v-model="selectValue"
      :clearable="clearable"
      :collapse-tags="collapseTags"
      filterable
      class="filter-item"
      :placeholder="placeholder"
      :disabled="disabled"
      :multiple="multiple == null ? false : true"
      :remote="remoteFilter"
      :remote-method="remoteQuery"
      @change="change"
    >

属性与数据url含义如下：

    1.url:要显示的下拉列表数据来源
    2.v-model数据的双向绑定,绑定父组件中的字段
    3.option自定义select的value对应的字段
    4.label自定义select的label对应的字段
    5.placeholder下拉列表提示
    6.multiple是否是多选
    7.localOptions使用本地的数据,不用请求远程数据,注意：使用该属性时Url属性不能要,不然无效

AJ-Report项目源码分析（2）

猜你喜欢