|
1 |
| -# t-table |
| 1 | +# t-ui |
2 | 2 |
|
3 |
| -## 项目启动 |
4 |
| - |
5 |
| -``` |
| 3 | +## 安装依赖 |
| 4 | +```shell |
6 | 5 | npm install
|
7 |
| -npm run serve |
8 | 6 | ```
|
9 | 7 |
|
10 |
| -### 项目打包 |
11 |
| -``` |
12 |
| -npm run build |
13 |
| -``` |
14 |
| - |
15 |
| - |
16 |
| -# TTable简单使用 |
17 | 8 |
|
18 |
| -## 1. 简介 |
19 |
| - HTML一行代码,可以实现表格分页/表格内/外按钮操作/行内文字变色/动态字典展示/filters格式化数据/排序/显示隐藏表格内操作按钮等 |
20 |
| - == |
21 |
| - > **新增隐藏某列及某单元格内容过长是否换行(默认内容过长省略号显示鼠标移入有tip提示)** |
22 |
| -========================================== |
23 |
| - > **代码示例:** |
| 9 | +## 本地运行src中组件示例 |
| 10 | +```shell |
| 11 | +npm run serve |
24 | 12 | ```
|
25 |
| - <t-table |
26 |
| - :table="table" |
27 |
| - @size-change="handlesSizeChange" |
28 |
| - @page-change="handlesCurrentChange" |
29 |
| - /> |
| 13 | +## 本地运行docs中组件文档 |
| 14 | +```shell |
| 15 | +npm run docs:dev |
30 | 16 | ```
|
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. 使用帮助 |
136 | 17 |
|
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 | +### 项目打包 |
252 | 19 | ```
|
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 |
275 | 21 | ```
|
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) |
289 | 22 |
|
290 | 23 | [基于ElementUi再次封装基础组件文档](https://wocwin.github.io/blog/)
|
0 commit comments