# elementUI二次封装Ui库

**Repository Path**: fang_1129691449_wu/elementUI

## Basic Information

- **Project Name**: elementUI二次封装Ui库
- **Description**: elementUI二次封装组件，表格、表格穿梭框
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2021-03-28
- **Last Updated**: 2023-03-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 穿梭框说明

​	elementUI二次封装组件

### 快速上手

1. 引入

   ```javascript
   import Tabel from "@/components/Table";
   export default {
     components: {
       Transfer,
     },
   }
   ```

   

2. 使用

   ```vue
   <template>
   	 <Transfer
         :select="select"
         :waitForList="waitForList"
         :columns="columns"
         :keys="keys"
         @onSubmit="onSubmit"
         @cancel="cancel"
       />
   </template>
   import Transfer from "@/components/Transfer";
   export default {
     components: {
       Transfer,
     },
     data() {
       return {
       	keys: "managerNo", // 指定key
       	select:[], // 选中商品
       	waitForList:[ // 待选商品
       		{ name: "aa", managerNo: 11 },
           	{ name: "bb", managerNo: 12 },
           	{ name: "cc", managerNo: 13 },
       	],
       	columns:[ // 表格显示
   			{
                 prop: "name",
                 label: "名称",
                 width: 100,
               },
               {
                 prop: "managerNo",
                 label: "数值",
               },
   		],
       }
     },
     methods: {
      // 选中数据
       onSubmit(list) {
         console.log(list);
       },
       // 取消
       cancel() {
         console.log(this.waitForList);
       },
     },
   }
   ```

   

3. 属性说明

   | 属性名      | 类型     | 默认值 | 说明       |
   | ----------- | -------- | ------ | ---------- |
   | keys        | String   | ''     | key值      |
   | select      | Array    | []     | 选中数据   |
   | waitForList | Array    | []     | 带选中数据 |
   | columns     | Array    | []     | 表格展示   |
   | @onSubmit   | function |        | 确认       |
   | @cancel     | function |        | 取消       |



## 表格说明

​	elementUI二次封装组件简化代码，增加代码可阅读性

​	表格依赖：表格拖拽

```javascript
import Sortable from "sortablejs";
```

### 快速上手

1. 引入

   1. 

   ```javascript
   import Tabel from "@/components/Table";
   export default {
     components: {
       Tabel,
     },
   }
   ```

   

2. 使用

   ```vue
   <template>
   	<Tabel
           :loading="loading"
       	:columns="columns"
           :table-data="list"
           :page-index="queryForm"
           @handleCurrent="handleCurrent"
        />
   </template>
   import Tabel from "@/components/Table";
   export default {
     components: {
       Tabel,
     },
     data() {
       return {
   		loading:false, // 是否开启加载
   		queryForm: { // 显示序号数据
   			size: 50,
           	current: 1,
   		},
       	list:[ // 待选商品
       		{ name: "aa", managerNo: 11 },
           	{ name: "bb", managerNo: 12 },
           	{ name: "cc", managerNo: 13 },
       	],
       	columns:[ // 表格显示
   			{
                 prop: "name",
                 label: "名称",
                 width: 100,
               },
               {
                 prop: "managerNo",
                 label: "数值",
               },
   		],
       }
     },
     methods: {
      // 选中数据
       handleCurrent(list) {
         console.log(list);
       },
     },
   }
   ```

   ![1616929409225](C:\Users\Administrator\Desktop\1616929409225.png)

3. 属性说明

   | 属性名                 | 类型                    | 默认值                                                     | 说明                                                         |
   | ---------------------- | ----------------------- | ---------------------------------------------------------- | ------------------------------------------------------------ |
   | loading                | Blooer                  | Boolean                                                    | 开启加载动画                                                 |
   | pageIndex              | Object                  | {current: 1,size: 50}                                      | 序号数据                                                     |
   | tableData              | Array                   | []                                                         | 展示数据                                                     |
   | columns                | Array                   | []                                                         | 表格展示，配置参数：columns                                  |
   | isIndex                | Blooer                  | true                                                       | 显示序号                                                     |
   | is_height              | String, Boolean, Number | false                                                      | 自定义高度，默认根据屏幕大小自适应高度                       |
   | isSele                 | Boolean                 | false                                                      | 开启多选                                                     |
   | radioObj               | Object                  | { label: "", isRadio: false, width: "38", radioId: null }; | 开启单选值，isRadio: 开启单选；width：单选宽度；label：单选显示 |
   | fixed                  | Blooer                  | true                                                       | 序号是否靠左固定                                             |
   | isRowDrop              | Blooer                  | false                                                      | 行是否拖拽                                                   |
   | cellStyle              | Function                | row, column, rowIndex, columnIndex                         | 改变单元格颜色，配置：cellStyle                              |
   | rowClassName           | Function                | Function({row, rowIndex})/String                           | 表格行变色，配置：tableRowClassName                          |
   | @handleCurrent         | Function                | row                                                        | 单击选中数据                                                 |
   | @handleSelectionChange | Function                | row                                                        | 多选选中数据，需开启多选才可使用                             |
   | @cellDblclick          | Function                | row                                                        | 双击选中数据                                                 |
   | @sortChange            | Function                | column                                                     | 对应列排序                                                   |

4. 配置参数

   #### columns

   | 属性名    | 类型           | 说明                                                         |
   | --------- | -------------- | ------------------------------------------------------------ |
   | prop      | String         | 显示数据                                                     |
   | label     | String         | 表格头                                                       |
   | width     | Number         | 表格宽度                                                     |
   | formatter | String         | 文本格式化，配置参数：formatter                              |
   | sortable  | String，Blooer | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sortChange 事件 |

   

   #### formatter

   | 属性名        | 说明       |
   | ------------- | ---------- |
   | dateFormatter | 时间格式化 |
   | textmatter    | 文本格式化 |
   | nummatter     | 金额格式化 |

   

   #### cellStyle

   ##### 示例

   ```javascript
   cellStyle(row, column, rowIndex, columnIndex) {
         return 'background:#FFFFFF !important;';
   },
   ```

   

   #### tableRowClassName

   返回值为属性名，需要更换别的颜色可直接在组件中定义

   ![1616929116146](C:\Users\Administrator\Desktop\1616929116146.png)

   #### 示例：

   ```javascript
   tableRowClassName({ row, rowIndex }) {
         return 'danger-row';
   },
   ```

   

   | 属性名      | 说明       |
   | ----------- | ---------- |
   | warning-row | 黄色       |
   | nummatter   | 金额格式化 |