使用elementui在工作中遇到的不熟练知识点总结

 {{currentNotice.title && currentNotice.title.length > 18 ? currentNotice.title.substring(0, 15) + '......' : currentNotice.title}}<br>
            {{currentNotice.articleSummary && currentNotice.articleSummary.length > 50 ? currentNotice.articleSummary.substring(0, 50) + '......' : currentNotice.articleSummary}}

一时想不起substring（）方法是什么作用，百度了一下substring() 方法用于提取字符串中介于两个指定下标之间的字符，其中的currentNotice.title.substring(0,15)是指提取currentNotice里面的title15位的标题，currentNotice.articleSummary是提取50字符的articleSummary

 <passcalllog v-if="passcalllist" :passcalllist.sync="passcalllist"></passcalllog>

父组件

 this.$emit("update:passcalllist", false);

子组件

vue中我们经常会用v-bind（:）给子组件传入参数，或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态，通过百度可以了解到，父组件通过:将passcalllist传给子组件，并使用了.sync修饰符，子组件可以通过$emit,使用updata:passcalllist将passcalllist更新为false直接改变父组件的passcallist的值由true变成false(注意：update:是被固定的，vue约定好的子组件的名称部分，passcalllist是我们要修改的状态名称，是与传入的状态名字对应的)

export const bizConstantRouter = [
  // 登录页面可以匿名访问
  {
    path: "/",
    name: "login",
    component: () => import(`@/views/${bizFolderName}/page/frame/Login_guangdong.vue`),
    meta: {
      anonymous: true
    }

业务常量路由，也就是允许匿名访问的页面，meta:{anonymous:true}，登录页面是默认要有的，业务上自行添加其他页面

<el-row :gutter="24">
<el-col :span="6">

gutter的意思就是这个栅格左右两边padding的值的和
span指的是栅格占据的列数

  <el-input
  v-model.trim="filters.fullName"
  prefix-icon="el-icon-search"
  clearable
  placeholder="可通过名称模糊查询"
  ></el-input>

v-model里面的修饰符.trim的作用是将用户输入的前后的空格去除
clearable是将是否输入框中的内容清空
prefix-icon是输入框前面的icon图标

 <el-select
  multiple
  v-model.trim="filters.unitNatures"
  clearable
  placeholder="可多选单位性质查询"
 >

multiple可多选

 <el-button
type="primary"
size="medium"
 @click="getList()"
 icon="el-icon-search"
>查询</el-button
              >

size指按钮的大小

<div
style="width: 100%; float: left; text-align: right"
v-loading="listLoading"
element-loading-text="拼命加载中,请稍等..."
element-loading-spinner="el-icon-loading"
>

loading加载，listLoading设置默认值为false，当加载需要的时候，将默认值改为true，会出现加载中的样式，element-loading-text是出现的文字，element-loading-spinner是出现的图标

<el-dialog
title="设置年度指标界面"
:visible.sync="setUpUnitTotalIndexVisible"
v-if="setUpUnitTotalIndexVisible"
width="78%"
:close-on-click-modal="false"
>

看到这里想起面试经常问的问题v-if和v-show的区别，以及css里面display:hidden和display:none的区别
个人总结的话是hidden和none的区别就是占位的问题，hidden只是隐藏了，位置还是占着的，而none就是将这个东西完全消失，不占位
v-if和v-show的话,v-if是操作DOM的让他消失，而v-show就是对display进行操作隐藏

close-on-click-modal是指可以通过点击模拟弹出框关闭

 <el-form :model="applyForm" ref="applyForm">

model指的是表单数据对象

 <span slot="label">待上报团组<el-badge v-if="page1.total > 0" :value="page1.total" class="item"></el-badge></span>

里面的badge指的是按钮图标右上角提示的消息，value是显示的数量

<template slot-scope="scope">
<div>
<el-button
type="primary"
size="small"
@click.native="submitGroup(scope.row, '新建')"
>编辑</el-button
>
</div>
</template>

这里父组件采用的是作用域插槽
在子组件中的插槽上有一句data="list"，而在父组件中也有slot-scope="scope",slot-scope就是取data的值，slot-scope的值是自定义的，我们可以取任何名称，但是data的值传过来时是以对象形式传输的，所以在这scope.data才是list的值