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属性不能要,不然无效