Element UI

，Element UI

https://element.eleme.cn/#/zh-CN

当要在非 vue 组件里调用 elment 的各种弹出框事件。只需要在当前 js 里面引入 ElementUI, 然后通过
ElementUI.Message/Notification/MessageBox...
调用各种 API

主题定制

当官网有教程，但是注意安装插件时，包管理器要一直。

1 首先安装「主题生成工具」,theme 需要加上 x ,暂时不知道为啥

npm i element-themex -g

2 安装白垩主题

# 从 npm

npm i element-theme-chalk -D

# 从 GitHub

npm i https://github.com/ElementUI/theme-chalk -D

3 et -i 生成 element-variables.scss 在这里修改即可

4.改好了使用 et 命令编译，自动会保存到 ../theme/index.css 中

5.mian.js 中引入即可

–安装

npm i element-ui -S

–引入库以及样式

import ElementUI from ‘element-ui’

import ‘element-ui/lib/theme-chalk/index.css’

–实例上 use

Vue.use(ElementUI, { size: ‘small’ }) size=small 表示 element 组件所有 size 默认都是 small

按需引入减少项目体积

https://blog.csdn.net/lxy123456780/article/details/107151232

需要说明一下 style 的 **scoped **属性

它确实可以私有化当前组件的样式。引用这个组件的其他组件无法直接修改内在样式
但是如果一个本身就是 scoped 的组件想修改另一个 scoped 组件样式比如 element 的样式，几乎是不可能的，!important 都没法。（只有用 /deep/）所有谨慎使用
https://blog.csdn.net/qq_39043923/article/details/88687046

想修改默认样式使用 /deep/ 添加于样式前

<el-col :span=8>
  <!--   element ui 一行24列 侧框占了8列   -->
</el-col>

<el-col :span=16>
  <keep-alive>
    <!-- router-view外层还需要套一层标签，不然会无视 :span=16 换行   -->
    <router-view></router-view>
  </keep-alive>
</el-col>

<!-- 表格中添加多选框 直接加 在表格中-->
<el-table-column
                 type="selection" //这就是最主要的
                 width="55">
</el-table-column>

侧导航栏详解

<el-menu-item index="1" :route="{path:'/about'}">
//index只能为字符串
<el-submenu></el-submenu>
//这个标签才能有子菜单

轮播图

<div class="block">
  <span class="demonstration">Click 指示器触发</span>
  <el-carousel trigger="click" height="150px">
    <el-carousel-item v-for="item in arr" :key="item">
      <h3 class="small">
        <el-image style="width:100px;height:100px"
                  :src="item" fit="contain"></el-image>
      </h3>
    </el-carousel-item>
  </el-carousel>
</div>

<script>
//data 中的图片配置
arr: [
  require("../assets/imgs/001.jpg"),
  require("../assets/imgs/002.jpg"),
  require("../assets/imgs/003.jpg"),
  require("../assets/imgs/004.jpg"),
  require("../assets/imgs/005.jpg"),
];
</script>

图片样式

//分页配置项

@size-change="handleSizeChange" 切换每页显示多少条
@current-change="handleCurrentChange" 翻页功能，当前页改变的时候
:page-sizes="[1, 2, 3]" 下拉框中有多少的选项 :page-size="2" 默认每页显示的条数
layout="sizes, prev, pager, next" 分页显示内容： sizes 每页显示多少条 prev
上翻页按钮 next 下翻页按钮 :total="cartList.length"> 总条数 :pager-count='11'
下面最多页码个数（不包括最后一位页码）

Form 表单验证

https://segmentfault.com/a/1190000020410128

alidate-event 属性的作用是: 输入时不触发表单验证.提交时再验证,你也可以设置成动态验证 –>

this.$refs['ajForm'].resetFields()

this.$refs['formRefName'].resetFields()

该方法可以重置表单的验证信息。每次打开弹窗表单时，都可以调用此事件

rule:{
//prop对应的规则属性
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{
required: true,
pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/,
message: '用户名必须是字母和数字组成,且6-12位',
trigger: 'blur'
}
],

//登录注册时 验证 当前表单 是否符合规则
submitForm(formName) {
console.log(this.$refs)
//validate 表单验证的方法 refs不能重名
this.$refs[formName].validate((valid) => {
if (valid) {
//前端规则成功可发送后端请求 验证用户名和密码
alert('submit!');
} else {
//规则错误 弹出错误信息
console.log('error submit!!');
return false;
}
});
}

el-table

在子标签中

添加属性：show-overflow-tooltip 可以隐藏过场的数据，鼠标悬停时，可以显示整体

> element-ui table 中文本框 input 无法输入问题

需要用到插槽 slot-scope=”scope”

<el-table :data="tableData">
  <el-table-column>
    <el-table-column>
      <template slot-scope="scope">
				<el-input v-model="scope.row.tableData中的数据">
        </el-input>
      </template>
    </el-table-column>
  </el-table-column>
</el-table>

template（模版）在这里属于一个固定用法：

我们主要说一下这个 scope 是个什么东西，按照 element 上的提示：

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

我们可以理解为：tableData 是给到 table 的记录集，scope 是 table 内部基于 tableData 生成出来的。

el-cascader bug 处理

-https://blog.csdn.net/weixin_38547641/article/details/108394836