Vue组件封装——模仿 Excel表格 文字筛选组件 / MarkDown 初识

目录

一.模仿 Excel表格 文字筛选组件

二.MarkDown 初识

---

一.模仿 Excel表格 文字筛选组件

• 应用场景：表格上方添加按钮，点击后有弹出框，里面有很多复选框供用户选择，用户勾选对应的复选框就会筛选出包含对应文字的行
• 效果展示：
• 我这里先实现了对年份的筛选，如果需要其他的文字筛选，可以将对应的数据添加到 utils.js文件中
• 封装思路：用 elementUI 弹窗组件封装整个子组件，里面包裹复选框（存储筛选条件），父组件监听子组件的事件并书写筛选逻辑，复选框选项存储在 utils.js 文件中
• 项目结构：
• 
• 问题及解决方案：
• 最初在主页没有显示该按钮，原因是：标签没有闭合
• 父组件没有成功监听子组件的事件原因：emit字符串，必须是小写，不能是驼峰，否则无法监听
• html 引用的js文件，添加了时间戳，防止缓存  
• utils.js：数据文件

(function (window) {
    let wordsList = [{
        prop:'2019',
        label:'2019年',
        width:100,
        show:true
    },{
        prop:'2020',
        // ...
    ]
    window.utils2 = { wordsList }
})(window)

• index.js：父组件监听封装子组件的文字过滤筛选逻辑

const wordsFliter = httpVueLoader('./components/words-fliter.vue');

new Vue({
  el: '#app',
  components: {wordsFliter},
  data: function() {
    return {
      wordsList: JSON.parse(JSON.stringify(utils2.wordsList)),
    }},
  methods: {
    // 文字筛选
    handleWordsChange(list){
      this.wordsList = list;
      const arr = []
      for(let item of this.wordsList) {
        if (item.show) {
          arr.push(item.prop)
        }}
      this.tableData = this.tableData.filter(col => arr.indexOf(col.YEAR) > -1);
    },},
})

• words-fliter.vue：封装的文字过滤筛选子组件

• index.html：主页面

// 防止缓存 添加时间戳

 

二.MarkDown 初识

1.标题

• 使用 = 和 - 标记一、二级标题
• 使用 # 号标记六个标题

我展示的是一级标题
=================
我展示的是二级标题
-----------------
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

2.段落、字体

段落的换行：两个以上空格 + 回车
在段落后面使用一个空行表示 重新开始一段

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

3.线

// 下面是分隔线
***
* * *
*****
- - -
----------

// 下面是删除线
~~ 我是删除线 ~~

// 下面是下划线
带下划线文本

// 下面是脚注
[^要注明的文本]

4.列表、区块

// 无序列表 *+- 后面跟空格
* 第一项
+ 第一项
- 第一项

// 有序列表 数字后面跟着点
1. 第一项
2. 第二项
3. 第三项

// 列表嵌套 在子列表的前面加四个空格
1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素

// 在区块中使用列表 区块是 >+空格
* 第一项
    > 我是列表引用的区块

> 区块中使用列表
> 1. 我是区块中的列表

5.代码块

// 反单引号包裹函数，反单引号（英文模式下的 ~）
`printf()` 函数

// 代码块可以用 ``` or tab键 or 四个空格

6.链接、图片

• [链接名称](链接地址)
• <链接地址>
• 
• 

7.表格

|  表头   | 表头  |
|  ----  | ----  |  // 这个符号用来区分 表头 和 表身
| 单元格  | 单元格 |

// 对齐方式
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |