Element-UI & Element-admin专题

H5兽超进化前端菜鸡兽
922 阅读2分钟

安装Element-admin的注意点

  1. 需要先安装python2.7
  2. 安装node-sass失败，可以执行下边的命令
    npm --registry https://registry.npm.taobao.org install node-sass
  3. deepin系统下安装node-sass，需要先安装g++解析器sudo apt-get install g++
  4. 可以先安装cnpm，然后执行cnpm install node-sass

组件

Card组件

  1. 使用el-card时，绑定body-style，可以控制card-body的样式

Cascader组件

  1. 指定特殊options结构
<el-cascader 
  v-model="submitForm.positionAddress" 
  :options="provinceOptions"
  :props="{ children: 'list', value: 'cityId', label: 'text'}"
></el-cascader>
  1. 除了chage事件外，其他事件都无法触发validate，Select组件也有同样的情况

Dropdown组件

  1. 再dropdown-item中通过command传递数据
//携带插槽
<el-dropdown-item :command="{ row: scope.row, command: 'invite' }">邀请面试</el-dropdown-item>

Form组件

  1. 表单验证，需要给Form添加:model属性, 不是v-model，清楚表单报错状态用form_ref.clearValidate(), 重置表单数据用form_ref.resetFields(),配置了对应rule的表单项被修改会触发validate事件
//验证规则示例
tel: [
  { required: true, message: '请输入验证码', trigger: 'blur' },
  { min: 6, max: 6, message: '请输入6位验证码', trigger: 'blur' },
  { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
],
  1. 表单重置无效，没有给el-form-item添加prop属性
  2. 发现一个表单验证的奇怪地方，一个复合组件包装了两个<el-input>中，validate的中change的触发并不是跟着<el-form-item>绑定的props走的，而是跟着复合组件中<el-input>的v-model变动而触发,具体见下例

嘉麒项目：listinfo/basic-pane/label-input组件

  1. <el-form-item>如果使用v-if隐藏，那么resetFields不会清空这个item绑定的v-model的值
  2. <el-form-item>可以通过加clss="is-required",手动设置必填效果
  3. 表头内容发生错位，添加下边的样式
.el-table {
    tr .gutter {
        display: table-cell!important;
    }
    colgroup .gutter{
        display: table-cell!important;
    }
}

Input组件

  1. 可以通过refs.name.focus()聚焦
  2. 密码，验证码可以添加@keyup.enter.native按回车直接登录提交体验

InputNumber组件

  1. 按钮修改和在输入框里输入都会触发change事件,但是,在父组件中直接修改v-model绑定的值,不会触发change事件
  2. 给InputNumber组件手动赋值,直接修改父组件中v-model绑定的值就行,尽量在nextTick的回调里赋值
  3. 有一种特殊情况需要注意, 那就是在输入框删除了原值, 在没输入新值的情况下直接blur, 可以在nextTick的回调里赋原值, 直接赋原值不行

Radio组件

  1. 注意Radio组件绑定的label值是字符串还是数字，Radio组件不会自动转换
  2. 表单中的Radio切换选项的时候，视图不更新，需要执行$forceUpdate()

Table组件

  1. 去除table的所有边框
.el-table__row{
  &>td{
    border: none;
  }
}
*::after, *::before{
  height: 0;
  background-color: #FFF !important;
}
.el-table--border, .el-table--group{
  border: none !important;
}
  1. table-column中的插槽不显示 给插槽添加slot-scope="scope"属性后，刷新页面

Tabs组件

  1. before-leave钩子，会在最开始执行一次，只有当返回值是false和Promise.reject时会阻止跳转，其他非值并不会阻止跳转

Upload组件

  1. name属性是后台对应的字段名，一定要加
  2. 组件auto-upload属性默认值为true,选完图片就会立刻执行上传
  3. 成功回调中的fileList并不是绑定的file-list,绑定的file-list用来回显，而fileList是每次选择的上传文件队列
  4. 可以给el-upload-list加flex和flex-direction样式来控制列表方向, 也可以控制Upload控件的宽度, 如果控件宽度太宽,列表默认先横向排列

收获

vue

  1. api中的request传入baseURL就可以改变实例创建时候传入的baseURL
  2. 父组件可以通过给子组件添加ref来调用子组件的方法

vue-router

  1. 未登录拦截后，将redirect=${to.path},作为login页面的query，登录后再用这个跳转

数据库

  1. 类似状态这种用0, 1表示的，要设置为字符串类型，不要设置为数字类型
  2. menu表的name，是由固定规则加path字段生成的，应该不存这个字段，再生成菜单的时候动态生成，这样以后添加菜单间分支移动的业务就会很简单
avatar
文章
阅读
粉丝