ip2region -- 查询IP地址

1.element-ui官网
2.语法杂记
3.表格组件的使用
4.弹窗+表格组件的使用
5.左侧导航栏的使用
6.设置表格按钮的隐藏状态
7.文件上传
8.表格使用插槽
9.自动补全输入框

1.element-ui官网

https://element-plus.org/zh-CN/guide/design.html

2.语法杂记

# 表格组件中，通过if语句来判断展示哪个样式，在if语句中可以去掉 ‘{{}}’
    {{ scope.row.pass_rate }}</el-tag>
<el-tag type="danger" effect="dark" v-else>{{ scope.row.pass_rate }}</el-tag>

3.表格组件的使用

官网地址：https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7
示例的代码库地址：https://github.com/wwsit/python_files/blob/master/004_element-ui/001_table.vue

# 功能介绍：
1. height属性 设置表格的高度，当表格的内容超过表格的高度就会展示滚动条； :row-style=ListRowStyle 可以设置每一行的高度
2. show-overflow-tooltip当内容过长被隐藏时显示tooltip
3. :header-cell-style="HeaderCellStyle"  可以设置表头的样式
4. 通过type="index"可以设置行的序号自动生成、自动变化
5. 通过fixed属性可以固定某一列的内容
6. 添加sortable属性,可以让某一列具有手动排序的功能
7. 在表格的列中添加 :formatter="方法名" 属性，可以对某一列的值进行格式化输出，例如让某一列的值变红、变成超链接的效果...

4.弹窗+表格组件的使用

使用的弹窗组件是"Dialog对话框"：https://element-plus.org/zh-CN/component/dialog.html
表格组件地址：https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7
示例的代码地址:https://github.com/wwsit/python_files/blob/master/004_element-ui/002_table_dialog.vue

# 功能介绍：
1. 点击弹窗按钮会有弹窗弹出
2. 所有枚举值以input类型展示，可以对枚举值进行修改、失焦时自动保存
3. 点击添加一行按钮，可以添加一行空白的内容，并焦点自动定位到最新的一行
4. 当填写的枚举值有重复，会标红提示

5.左侧导航栏的使用

导航栏组件地址：https://element.eleme.cn/#/zh-CN/component/menu
示例的代码地址:https://github.com/wwsit/python_files/blob/master/004_element-ui/003_menu.vue

# 功能介绍：
1. 展开某个一级目录，并且点击对应的二级目录菜单
2. 部分菜单不可以点击
3. 刷新页面会保存当前激活的菜单
4. 解决激活页面与跳转页面不一致的问题 

6.设置表格按钮的隐藏状态

示例的代码地址: 
https://github.com/wwsit/python_files/blob/master/004_element-ui/004_%E8%AE%BE%E7%BD%AE%E8%A1%A8%E6%A0%BC%E6%8C%89%E9%92%AE%E7%9A%84%E9%9A%90%E8%97%8F%E7%8A%B6%E6%80%81.vue

# 功能介绍：
1. 通过函数的形式设置按钮是否禁用  

7.文件上传

组件地址：https://element-plus.gitee.io/zh-CN/component/upload.html
示例代码：https://github.com/wwsit/python_files/blob/master/004_element-ui/005_upload%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0.vue

# 功能介绍：
1. 可以上传和加载文件
2. 限制文件上传的类型
3. 限制文件上传的数量，新的文件会自动覆盖旧文件，并且支持手动删除文件
4. 点击已上传的文件可以进行下载

8.表格使用插

示例代码：https://github.com/wwsit/python_files/blob/master/004_element-ui/007_%E8%A1%A8%E6%A0%BC%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%8F%92%E6%A7%BD.vue
# 功能介绍：
1. 可以在表格中加入其它组件的功能

9.自动补全输入框

示例代码：https://github.com/wwsit/python_files/blob/master/004_element-ui/008_%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8%E8%BE%93%E5%85%A5%E6%A1%86.vue
# 功能介绍：
    1. 输入部分内容，会进行查询，有查询到符合的内容会进行返回

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。