br-dionysus 1.8.4 → 1.8.5

package/README.md

@@ -22,6 +22,8 @@
 
 + MTableColumnSet([表格头设置组件](#表格头设置组件))
 
++ MTableSuper([整合表格组件](#整合表格组件))
+
 + MTableV2([虚拟化表格](#虚拟化表格))
 
 + SkinConfig([皮肤设置](#皮肤设置))
@@ -1490,7 +1492,7 @@ const tableConfig = ref({
 
 
 
-虚拟化表格
+整合表格组件
 =================
 
 ### 1) 基础用法
@@ -1501,55 +1503,242 @@ const tableConfig = ref({
 
 <template>
   <div class="g-box">
-    <p @click="test">{{ tableConfig }}</p>
-    <MTableV2
+    <h3>基础功能</h3>
+    <MTableSuper
       :data="tableData"
-      :columns="tableTitle"
-      :height="500"
+      v-if="!tableData"
       border
-      fixed
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTableSuper>
+    <h3>带选择的表格</h3>
+    <MTableSuper
+      :data="tableData"
+      border
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <el-table-column
+        prop="name"
+        label="名称"
+      >
+        <el-table-column
+          prop="date"
+          label="时间"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+        ></el-table-column>
+      </el-table-column>
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+    <h3>展开列</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
       v-model:tableConfig="tableConfig"
-      tableConfigKey="MTableV2Demo"
-    ></MTableV2>
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @headerDragend="headerDragend"
+      expandProp="sn"
+      @privateExpandChange="privateExpandChange"
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        type="expand"
+        width="1"
+      >
+        <template #default="props">
+          <h1>index{{ props.index }}</h1>
+          <h1>$index{{ props.$index }}</h1>
+          <h1>测试</h1>
+        </template>
+      </MTableColumn>
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+    <h3>树状表格</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      @headerDragend="headerDragend"
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @expandChange="privateExpandChange"
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+import { useTableConfig } from 'packages/index'
+import { MTableColumn } from 'packages/MTableColumn'
+
+const privateExpandChange = (row: any, expandedRows: any[]) => {
+  console.log('row', row)
+  console.log('expandedRows', expandedRows)
+}
+
+// const test = (data: any) => {
+//   console.log('data', data)
+// }
 
 const tableData = ref<any[]>([])
-const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
-  title: '序号',
-  key: 'sn',
-  dataKey: 'sn',
-  width: 300
+const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200
+  // fixed: 'right'
 }, {
-  title: '时间',
-  key: 'date',
-  dataKey: 'date',
-  width: 300
+  label: '时间',
+  prop: 'date',
+  minWidth: 200
+  // fixed: 'left'
 }, {
-  title: '地址',
-  key: 'address',
-  dataKey: 'address',
-  width: 300
+  label: '地址',
+  prop: 'address',
+  minWidth: 200
 }, {
-  title: '名称',
-  key: 'name',
-  dataKey: 'name',
-  width: 300
+  label: '名称',
+  prop: 'name',
+  minWidth: 200
 }], tableData)
+console.log('tableTitle', tableTitle.value)
 
-const test = () => {
-  filtersValue.value = {}
-}
 tableData.value = [{
   id: 1,
-  sn: 'sn',
-  date: 'date',
-  address: 'address',
-  name: 'name'
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  children: [{
+    id: 21,
+    sn: 1,
+    date: '2016-05-02',
+    name: 'Tom21',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }, {
+    id: 22,
+    sn: 2,
+    date: '2016-05-02',
+    name: 'Tom22',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }]
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
 }]
 </script>
 
@@ -1564,18 +1753,132 @@ tableData.value = [{
 
 ### 2) Attributes
 
-| 参数                 | 说明                                                | 类型                         | 可选值                       | 默认值                                                                               |
-|--------------------|---------------------------------------------------|----------------------------|---------------------------|-----------------------------------------------------------------------------------|
-| size               | 尺寸                                                | string                     | small \| large \| default | default                                                                           |
-| data               | 要在表中渲染的数据数组                                       | any[]                      | -                         | []                                                                                |
-| columns            | 表格列配置                                             | TableV2Title[]             | -                         | []                                                                                |
-| filtersValue       | 表格内容筛选(当为null时，不显示筛选图标)                           | FilterValue \| null        | -                         | null                                                                              |
-| tableConfig        | 表格配置                                              | TableConfig \| null        | -                         | null                                                                              |
-| tableConfigKey     | 表格配置key                                           | string                     | -                         | ''                                                                                |
-| fixed              | 单元格宽度是自适应还是固定                                     | boolean                    | -                         | false                                                                             |
-| estimatedRowHeight | 渲染动态的单元格的预估高度                                     | number \| null             | -                         | null                                                                              |
-| headerHeight       | Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 | number \| number[] \| null | -                         | null                                                                              |
-| 其余参数               | 参考el官网的table                                      | any                        | -                         | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
+| 参数             | 说明                          | 类型               | 可选值 | 默认值                                                 |
+|----------------|-----------------------------|------------------|-----|-----------------------------------------------------|
+| data           | 表格的数据                       | Array            | -   | [ ]                                                 |
+| sole           | 行的唯一值                       | String , number  | -   | key                                                 |
+| filtersValue   | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null | -   | null                                                |
+| expandProp     | 展开图标列(如使用这个属性则必须存在rowKey属性) | string           | -   | ''                                                  |
+| tableConfigKey | 表格配置key                     | string           | -   | ''                                                  |
+| 其余参数           | 参考el官网的table                | any              | -   | https://element-plus.org/zh-CN/component/table.html |
+
+## 要求
+
+```
+sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
+```
+
+### 3) Events
+
+| 方法名                 | 说明                                   | 回调参数                                                |
+|---------------------|--------------------------------------|-----------------------------------------------------|
+| pasteData           | 表格粘贴方法                               | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData       |
+| update:tableConfig  | 表格配置更新                               | \[tableConfig: TableConfig]                         |
+| privateExpandChange | expandProp模式下 当用户对某一行展开或者关闭的时候会触发该事件 | [row: any, expandedRows: any[]]                     |
+| 其余方法                | 参考el官网的table                         | https://element-plus.org/zh-CN/component/table.html |
+
+### 4) PasteAction
+
+| 参数         | 说明                                     | 类型     | 
+|------------|----------------------------------------|--------|
+| editRow    | 返回粘贴的对应行的原始数据                          | Object |
+| editColumn | 返回粘贴时鼠标所在列的 表格prop值                    | String |
+| arr        | 返回粘贴时候处理之后的 数组信息                       | Array  |
+| rowIndex   | 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号 | number |
+
+
+
+
+
+虚拟化表格
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-box">
+    <p @click="test">{{ tableConfig }}</p>
+    <MTableV2
+      :data="tableData"
+      :columns="tableTitle"
+      :height="500"
+      border
+      fixed
+      v-model:tableConfig="tableConfig"
+      tableConfigKey="MTableV2Demo"
+    ></MTableV2>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import useTableV2Config from 'packages/Hook/useTableV2Config/useTableV2Config'
+
+const tableData = ref<any[]>([])
+const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo', [{
+  title: '序号',
+  key: 'sn',
+  dataKey: 'sn',
+  width: 300
+}, {
+  title: '时间',
+  key: 'date',
+  dataKey: 'date',
+  width: 300
+}, {
+  title: '地址',
+  key: 'address',
+  dataKey: 'address',
+  width: 300
+}, {
+  title: '名称',
+  key: 'name',
+  dataKey: 'name',
+  width: 300
+}], tableData)
+
+const test = () => {
+  filtersValue.value = {}
+}
+for (let i = 0; i < 1000; i++) {
+  tableData.value.push({
+    id: i,
+    sn: 'sn' + i,
+    date: 'date' + i,
+    address: 'address' + i,
+    name: 'name' + i
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数                 | 说明                                                | 类型                         | 可选值                       | 默认值                                                                               |
+|--------------------|---------------------------------------------------|----------------------------|---------------------------|-----------------------------------------------------------------------------------|
+| size               | 尺寸                                                | string                     | small \| large \| default | default                                                                           |
+| data               | 要在表中渲染的数据数组                                       | any[]                      | -                         | []                                                                                |
+| columns            | 表格列配置                                             | TableV2Title[]             | -                         | []                                                                                |
+| filtersValue       | 表格内容筛选(当为null时，不显示筛选图标)                           | FilterValue \| null        | -                         | null                                                                              |
+| tableConfig        | 表格配置                                              | TableConfig \| null        | -                         | null                                                                              |
+| tableConfigKey     | 表格配置key                                           | string                     | -                         | ''                                                                                |
+| fixed              | 单元格宽度是自适应还是固定                                     | boolean                    | -                         | false                                                                             |
+| estimatedRowHeight | 渲染动态的单元格的预估高度                                     | number \| null             | -                         | null                                                                              |
+| headerHeight       | Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 | number \| number[] \| null | -                         | null                                                                              |
+| cellWidthAdaptive  | 单元格宽度自适应                                          | boolean                    | -                         | false                                                                             |
+| 其余参数               | 参考el官网的table                                      | any                        | -                         | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
 
 ### 3) Events
 
@@ -4005,6 +4308,304 @@ const tableConfig = ref({
 
 
 
+整合表格组件
+=================
+
+### 1) 基础用法
+
+
+
+```html
+
+<template>
+  <div class="g-box">
+    <h3>基础功能</h3>
+    <MTableSuper
+      :data="tableData"
+      v-if="!tableData"
+      border
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTableSuper>
+    <h3>带选择的表格</h3>
+    <MTableSuper
+      :data="tableData"
+      border
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <el-table-column
+        prop="name"
+        label="名称"
+      >
+        <el-table-column
+          prop="date"
+          label="时间"
+        ></el-table-column>
+        <el-table-column
+          prop="address"
+          label="地址"
+        ></el-table-column>
+      </el-table-column>
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+    <h3>展开列</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @headerDragend="headerDragend"
+      expandProp="sn"
+      @privateExpandChange="privateExpandChange"
+    >
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        type="expand"
+        width="1"
+      >
+        <template #default="props">
+          <h1>index{{ props.index }}</h1>
+          <h1>$index{{ props.$index }}</h1>
+          <h1>测试</h1>
+        </template>
+      </MTableColumn>
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+    <h3>树状表格</h3>
+    <MTableSuper
+      v-if="!tableData"
+      class="style.box"
+      :data="tableData"
+      border
+      @headerDragend="headerDragend"
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      @expandChange="privateExpandChange"
+    >
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTableSuper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useTableConfig } from 'packages/index'
+import { MTableColumn } from 'packages/MTableColumn'
+
+const privateExpandChange = (row: any, expandedRows: any[]) => {
+  console.log('row', row)
+  console.log('expandedRows', expandedRows)
+}
+
+// const test = (data: any) => {
+//   console.log('data', data)
+// }
+
+const tableData = ref<any[]>([])
+const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200
+  // fixed: 'right'
+}, {
+  label: '时间',
+  prop: 'date',
+  minWidth: 200
+  // fixed: 'left'
+}, {
+  label: '地址',
+  prop: 'address',
+  minWidth: 200
+}, {
+  label: '名称',
+  prop: 'name',
+  minWidth: 200
+}], tableData)
+console.log('tableTitle', tableTitle.value)
+
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  children: [{
+    id: 21,
+    sn: 1,
+    date: '2016-05-02',
+    name: 'Tom21',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }, {
+    id: 22,
+    sn: 2,
+    date: '2016-05-02',
+    name: 'Tom22',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office'
+  }]
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}]
+</script>
+
+<style lang="scss" scoped>
+.g-box {
+  max-width: 1000px;
+}
+</style>
+
+
+```
+
+### 2) Attributes
+
+| 参数             | 说明                          | 类型               | 可选值 | 默认值                                                 |
+|----------------|-----------------------------|------------------|-----|-----------------------------------------------------|
+| data           | 表格的数据                       | Array            | -   | [ ]                                                 |
+| sole           | 行的唯一值                       | String , number  | -   | key                                                 |
+| filtersValue   | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null | -   | null                                                |
+| expandProp     | 展开图标列(如使用这个属性则必须存在rowKey属性) | string           | -   | ''                                                  |
+| tableConfigKey | 表格配置key                     | string           | -   | ''                                                  |
+| 其余参数           | 参考el官网的table                | any              | -   | https://element-plus.org/zh-CN/component/table.html |
+
+## 要求
+
+```
+sole 必须传递在表格数据内为唯一的值  如id key 等不会发生重复的关键字
+```
+
+### 3) Events
+
+| 方法名                 | 说明                                   | 回调参数                                                |
+|---------------------|--------------------------------------|-----------------------------------------------------|
+| pasteData           | 表格粘贴方法                               | 共有2个参数,依次为粘贴动作的数据PasteAction ,表格原始数据tableData       |
+| update:tableConfig  | 表格配置更新                               | \[tableConfig: TableConfig]                         |
+| privateExpandChange | expandProp模式下 当用户对某一行展开或者关闭的时候会触发该事件 | [row: any, expandedRows: any[]]                     |
+| 其余方法                | 参考el官网的table                         | https://element-plus.org/zh-CN/component/table.html |
+
+### 4) PasteAction
+
+| 参数         | 说明                                     | 类型     | 
+|------------|----------------------------------------|--------|
+| editRow    | 返回粘贴的对应行的原始数据                          | Object |
+| editColumn | 返回粘贴时鼠标所在列的 表格prop值                    | String |
+| arr        | 返回粘贴时候处理之后的 数组信息                       | Array  |
+| rowIndex   | 根据sole的值 去data内查找   当前操作的 粘贴行在data内的序号 | number |
+
+
+
+
+
 虚拟化表格
 =================
 
@@ -4059,13 +4660,15 @@ const { tableTitle, tableConfig, filtersValue } = useTableV2Config('MTableV2Demo
 const test = () => {
   filtersValue.value = {}
 }
-tableData.value = [{
-  id: 1,
-  sn: 'sn',
-  date: 'date',
-  address: 'address',
-  name: 'name'
-}]
+for (let i = 0; i < 1000; i++) {
+  tableData.value.push({
+    id: i,
+    sn: 'sn' + i,
+    date: 'date' + i,
+    address: 'address' + i,
+    name: 'name' + i
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -4090,6 +4693,7 @@ tableData.value = [{
 | fixed              | 单元格宽度是自适应还是固定                                     | boolean                    | -                         | false                                                                             |
 | estimatedRowHeight | 渲染动态的单元格的预估高度                                     | number \| null             | -                         | null                                                                              |
 | headerHeight       | Header 的高度由height设置。 如果传入数组，它会使 header row 等于数组长度 | number \| number[] \| null | -                         | null                                                                              |
+| cellWidthAdaptive  | 单元格宽度自适应                                          | boolean                    | -                         | false                                                                             |
 | 其余参数               | 参考el官网的table                                      | any                        | -                         | https://element-plus.org/zh-CN/component/table-v2.html#tablev2-%E5%B1%9E%E6%80%A7 |
 
 ### 3) Events