Skip to content

Commit 9883e0e

Browse files
wocwinwocwin
committedAug 14, 2020
feat:新增基于elementUI再次封装组件
1 parent f525ce3 commit 9883e0e

File tree

17 files changed

+652
-896
lines changed

17 files changed

+652
-896
lines changed
 

‎.eslintrc.js

+2-13
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,7 @@ module.exports = {
1111
parser: 'babel-eslint'
1212
},
1313
rules: {
14-
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
14+
'no-console': 'off',
1515
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
16-
},
17-
overrides: [
18-
{
19-
files: [
20-
'**/__tests__/*.{j,t}s?(x)',
21-
'**/tests/unit/**/*.spec.{j,t}s?(x)'
22-
],
23-
env: {
24-
mocha: true
25-
}
26-
}
27-
]
16+
}
2817
}

‎README.md

+11-278
Original file line numberDiff line numberDiff line change
@@ -1,290 +1,23 @@
1-
# t-table
1+
# t-ui
22

3-
## 项目启动
4-
5-
```
3+
## 安装依赖
4+
```shell
65
npm install
7-
npm run serve
86
```
97

10-
### 项目打包
11-
```
12-
npm run build
13-
```
14-
15-
16-
# TTable简单使用
178

18-
## 1. 简介
19-
HTML一行代码，可以实现表格分页/表格内/外按钮操作/行内文字变色/动态字典展示/filters格式化数据/排序/显示隐藏表格内操作按钮等
20-
==
21-
> **新增隐藏某列及某单元格内容过长是否换行（默认内容过长省略号显示鼠标移入有tip提示）**
22-
==========================================
23-
> **代码示例：**
9+
## 本地运行src中组件示例
10+
```shell
11+
npm run serve
2412
```
25-
<t-table
26-
:table="table"
27-
@size-change="handlesSizeChange"
28-
@page-change="handlesCurrentChange"
29-
/>
13+
## 本地运行docs中组件文档
14+
```shell
15+
npm run docs:dev
3016
```
31-
## 2. 结构
32-
##### 2.1 顶部
33-
展示头部选项栏
34-
```
35-
<div class="toolbar"
36-
v-if="isShow('toolbar')">
37-
<slot name="toolbar"></slot>
38-
<div class="toolbar">
39-
<el-button
40-
v-for="(item, index) in getToolbarBtn"
41-
:key="index"
42-
@click="toolbarFun(item)"
43-
:icon="item.icon?item.icon:'el-icon-search'"
44-
:type="item.type||'primary'"
45-
size="small"
46-
>{{item.text}}</el-button>
47-
<el-popover
48-
ref="popoverClose"
49-
popper-class="operator_popover operator_pop"
50-
class="operator_popover operator_pop"
51-
placement="bottom-start"
52-
trigger="hover"
53-
v-if="getToolbarDown.length"
54-
>
55-
<ul class="ulClose">
56-
<li
57-
v-for="(item, index) in getToolbarDown"
58-
:key="index"
59-
@click="toolbarFun(item)"
60-
>{{item.text}}</li>
61-
</ul>
62-
<el-button size="small" type="primary" icon="el-icon-setting" slot="reference">
63-
操作
64-
<i class="el-icon-arrow-down"></i>
65-
</el-button>
66-
</el-popover>
67-
</div>
68-
</div>
69-
```
70-
##### 2.2 中间
71-
展示表格数据
72-
```
73-
<el-table
74-
ref="el-table"
75-
:data="table.data"
76-
:height="height? fixHeight? fixHeight: undefined: $store.getters.tableHeight - otherHeight"
77-
v-bind="$attrs"
78-
v-on="$listeners"
79-
border
80-
@row-click="rowClick"
81-
>
82-
......
83-
</el-table>
84-
```
85-
##### 2.3 底部
86-
展示分页
87-
```
88-
<el-pagination
89-
v-show="table.data && table.data.length && isShowPagination"
90-
:current-page="table.currentPage"
91-
@current-change="handlesCurrentChange"
92-
:page-sizes="[10, 20, 50, 100]"
93-
:page-size="table.pageSize"
94-
:layout="size?'total, prev, pager, next':'total, sizes, prev, pager, next, jumper'"
95-
:total="table.total"
96-
v-bind="$attrs"
97-
v-on="$listeners"
98-
background
99-
></el-pagination>
100-
```
101-
## events 其他事件按照el-table直接使用（如sort-change排序事件）
102-
103-
| 事件名 | 说明 | 返回值 |
104-
| :---------: | :------- | :------------: |
105-
| page-change | 当前页码 | 当前选中的页码 |
106-
## 3. 配置参数
107-
108-
| 参数 | 说明 | 类型 | 是否必须 |
109-
| ----------------- | ------------------------------------------ | ------------- | -------- |
110-
| table | 表格数据对象 | Object | 是 |
111-
| ---data | 展示数据 | Array | 是 |
112-
| ---column | 表头信息 | Array | 是 |
113-
| -------sort | 排序 （设置：sort:true） | Boolean | 否 |
114-
| -------noShowTip | 是否换行 （设置：noShowTip:true） | Boolean | 否 |
115-
| -------noShowColumn | 是否隐藏当前列（设置：noShowColumn:true） | Boolean | 否 |
116-
| -------filters | filters转义（后台返回数字转中文，时间戳转时间）| Object | 否 |
117-
| ---toolbar | 表格外操作栏选中表格某行，可以将其数据传出 | Array | 否 |
118-
| ---operator | 表格内操作栏数据 | Array | 否 |
119-
| -------show | 表格内操作栏根据状态显示 | Object | 否 |
120-
| -------noshow | 表格内操作栏根据多种状态不显示 | Array | 否 |
121-
| -------resCode | 表格内操作栏按钮权限资源（路由path） 暂不支持| String | 否 |
122-
| ---operatorConfig | 操作栏样式 | Object | 否 |
123-
| ---changeColor | 整行文字颜色样式控制 | Object | 否 |
124-
| ---firstColumn | 表格首列(序号 index,复选框 selection）排列 | object | 否 |
125-
| ---total | 数据总条数 | Number | 否 |
126-
| ---pageSize | 页数量 | Number | 否 |
127-
| ---currentPage | 是否需要显示切换页条数 | Number | 否 |
128-
| height | 是否固定高度 | Boolean | 否 |
129-
| fixHeight | 走固定高度时候表格高度 | String/Number | 否 |
130-
| size | 分页类型选项 | Boolean | 否 |
131-
| isShowPagination | 是否显示分页(默认显示分页) | Boolean | 否 |
132-
| isCopy | 是否允许双击单元格复制 暂不支持 | Boolean | 否 |
133-
134-
135-
## 4. 使用帮助
13617

137-
#### 4.1 关于顶部工具栏
138-
使用插槽toolbar传入即可
139-
```
140-
<template #toolbar>
141-
<el-select v-model="optValue"
142-
placeholder="请选择"
143-
size="small"
144-
@change="optionChange">
145-
<el-option v-for="item in options"
146-
:key="item.value"
147-
:label="item.label"
148-
:value="item.value">
149-
</el-option>
150-
</el-select>
151-
</template>
152-
```
153-
##### 若需要表格外操作栏(超过3个按钮，第4个按钮会以下拉的方式展示)
154-
配置toolbar即可（前提条件是，必须使用插槽toolbar）
155-
```
156-
toolbar: [
157-
{
158-
text: '返回上一个页面',
159-
icon: 'el-icon-circle-plus-outline',
160-
type: 'danger',
161-
fun: this.getBack
162-
}
163-
]
164-
```
165-
#### 4.2 关于表格内操作栏
166-
配置operator即可
167-
```
168-
operator: [
169-
{
170-
text: '预览',
171-
type: 'primary',
172-
fun: this.preview
173-
},
174-
{
175-
text: '编辑',
176-
type: 'danger',
177-
fun: this.edit,
178-
show: { key: 'status', val: [3,4] } // 表status值为3或者4时，显示此操作健 根据后台字段返回是数字还是字符串来显示
179-
},
180-
{
181-
text: '撤销',
182-
fun: this.revoke,
183-
show: { key: 'status', val: ['1'] }
184-
}
185-
]
186-
```
187-
###### 补充说明：多种状态控制按钮的显示与隐藏
188-
```
189-
operator: [
190-
{
191-
text: '预览',
192-
type: 'primary',
193-
fun: this.preview,
194-
noshow:[{key:'fields',val:'isHasVal'},{key:'status',val:[0,1,99]},{key:'channelCode',val:['bank']}]
195-
// noshow中的key值(fields/status/channelCode)是表格后台返回的字段
196-
// 当val等于字符串'isHasVal'时,字段'fields'返回为空时，此行操作按钮隐藏
197-
// 以上综合：当'status'为0/1/99并且'channelCode'为'bank'及'fields'为空时,隐藏按钮
198-
}
199-
]
200-
```
201-
#### 4.3 关于表格操作栏样式，如固定右侧，宽度
202-
```
203-
operatorConfig: {
204-
fixed: 'right',
205-
width: 200,
206-
label: '操作'
207-
}
208-
```
209-
#### 4.4 关于表格某行文字颜色
210-
```
211-
changeColor: {
212-
key: 'status', // 状态
213-
val: '0', // 状态值
214-
txtStyle: '#ef473a' // 设置文字颜色也可以用“#ef473a”
215-
}
216-
```
217-
#### 4.5 关于表格状态filters方法使用（在表头column对象里添加如下字段）
218-
```
219-
{ prop: 'loanInterest', label: '利息', width: '120' , filters: { method: '%' }},
220-
filters: { method: '%' }：表显示百分比
221-
filters: { method: '￥' }：表显示金额
222-
filters: { param: 'REPAYMENT_STATES' } ：表状态对应的canstants对应的字段
223-
```
224-
#### 4.6 新增翻页选中功能（2020-02-27添加）
225-
**页面代码新增：:row-key属性和selection-change复选框事件**
226-
```
227-
<t-table
228-
:table="table"
229-
@size-change="handlesSizeChange"
230-
@page-change="handlesCurrentChange"
231-
:row-key="getRowKey"
232-
@selection-change="handlesSelectionChange"
233-
/>
234-
```
235-
**js代码**
236-
```
237-
// 获取列表数据的唯一标识
238-
getRowKey (row) {
239-
return row.id
240-
},
241-
// 选中的数据
242-
handlesSelectionChange (val) {
243-
this.chosenIds = val.map(item => item.id)
244-
},
245-
```
246-
==注意：==（参考配置参数）
247-
firstColumn: { type: 'selection', isPaging: true },
248-
type: 'selection' 表复选框
249-
isPaging: true 表可以跨页勾选
250-
251-
**组件代码新增了:reserve-selection属性**
18+
### 项目打包
25219
```
253-
<!-- 序列号/复选框 -->
254-
<div v-if="table.firstColumn">
255-
<el-table-column
256-
:type="table.firstColumn.type"
257-
width="50"
258-
:label="table.firstColumn.label"
259-
align="center"
260-
v-if="table.firstColumn.type!=='index'"
261-
></el-table-column>
262-
<el-table-column
263-
:type="table.firstColumn.type"
264-
width="50"
265-
:reserve-selection="table.firstColumn.isPaging||false"
266-
:label="table.firstColumn.label"
267-
align="center"
268-
v-if="table.firstColumn.type==='index'"
269-
>
270-
<template slot-scope="scope">
271-
<span>{{isShowPagination?((table.currentPage - 1) * table.pageSize + scope.$index + 1):scope.$index + 1}}</span>
272-
</template>
273-
</el-table-column>
274-
</div>
20+
npm run build
27521
```
276-
#### 4.7 关于element-ui el-table提供的一些方法，样式如何添加
277-
按照el-table写法直接使用即可，无需其他配置
278-
279-
## 5. Dome
280-
参考：demo页面
281-
******
282-
## 最后
283-
[组件地址](https://github.com/wocwin/t-table)
284-
285-
## 相关文章
286-
[axios二次封装，接口统一存放,满足RESTful风格](https://blog.csdn.net/cwin8951/article/details/104415090)
287-
******
288-
[keep-alive不能缓存多层级路由(vue-router)菜单问题解决](https://blog.csdn.net/cwin8951/article/details/106644118)
28922

29023
[基于ElementUi再次封装基础组件文档](https://wocwin.github.io/blog/)

‎package.json

+19-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "t-table",
2+
"name": "t-ui",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -11,29 +11,34 @@
1111
"dependencies": {
1212
"axios": "^0.19.2",
1313
"babel-polyfill": "^6.26.0",
14-
"core-js": "^3.6.4",
15-
"element-ui": "^2.4.5",
14+
"core-js": "^3.6.5",
15+
"dayjs": "^1.8.33",
16+
"element-ui": "^2.13.2",
1617
"es6-promise": "^4.2.8",
18+
"js-cookie": "^2.2.1",
19+
"screenfull": "^4.2.0",
1720
"vue": "^2.6.11",
18-
"vue-router": "^3.1.5",
19-
"vuex": "^3.1.2"
21+
"vue-clipboard2": "^0.3.1",
22+
"vue-router": "^3.4.3",
23+
"vuex": "^3.5.1",
24+
"xlsx": "^0.16.6"
2025
},
2126
"devDependencies": {
22-
"@vue/cli-plugin-babel": "^4.2.0",
23-
"@vue/cli-plugin-eslint": "^4.2.0",
24-
"@vue/cli-plugin-unit-mocha": "^4.2.0",
25-
"@vue/cli-service": "^4.2.0",
27+
"@vue/cli-plugin-babel": "^4.5.3",
28+
"@vue/cli-plugin-eslint": "^4.5.3",
29+
"@vue/cli-plugin-unit-mocha": "^4.5.3",
30+
"@vue/cli-service": "^4.5.3",
2631
"@vue/eslint-config-standard": "^5.1.0",
2732
"@vue/test-utils": "1.0.0-beta.31",
28-
"babel-eslint": "^10.0.3",
33+
"babel-eslint": "^10.1.0",
2934
"chai": "^4.1.2",
3035
"eslint": "^6.7.2",
31-
"eslint-plugin-import": "^2.20.1",
32-
"eslint-plugin-node": "^11.0.0",
36+
"eslint-plugin-import": "^2.22.0",
37+
"eslint-plugin-node": "^11.1.0",
3338
"eslint-plugin-promise": "^4.2.1",
3439
"eslint-plugin-standard": "^4.0.0",
35-
"eslint-plugin-vue": "^6.1.2",
36-
"sass": "^1.25.0",
40+
"eslint-plugin-vue": "^6.2.2",
41+
"sass": "^1.26.10",
3742
"sass-loader": "^8.0.2",
3843
"vue-cli-plugin-element": "^1.0.1",
3944
"vue-template-compiler": "^2.6.11"

‎public/favicon.ico

0 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)
Please sign in to comment.