一、需求
定制开发小程序对于后台管理系统项目定制开发小程序必不可少的列表数据渲染；而的table定制开发小程序组件还是需要写很多代码；定制开发小程序为了方便因此封装了TTable组件(一行代码，定制开发小程序可以实现表格编辑/分页/表格内/定制开发小程序外按钮操作/排序/定制开发小程序显示隐藏表格内操作按钮)
二、组件功能
1、基础表格2、带斑马线、带边框、固定列/表头3、多级表头4、自定义表头5、单个单元格编辑功能6、可以设置表格标题7、可集成了分页组件8、表格可以自定义插槽渲染某列数据9、表格可以render渲染某列数据（支持jsx方式）10、集成了表格内操作和表格外操作
三、最终效果
四、参数配置
1、代码示例：
<t-table :table="table" :columns="table.columns" @size-change="handlesSizeChange" @page-change="handlesCurrentChange" />
2、events 其他事件按照el-table直接使用（如sort-change排序事件）
| 事件名 | 说明 | 返回值 |
|---|
| page-change | 当前页码 | 当前选中的页码 |
| save | 保存按钮 | 编辑后的所有数据 |
| handleEvent | 单个输入触发事件 | configEdit 中的 event 值和对应输入的 value 值 |
| radioChange | 单选选中事件 | 返回当前选中的整行数据 |
Methods 方法
| 事件名 | 说明 | 参数 |
|---|
| clearSelection | 用于多选表格，清空用户的选择 | - |
| clearSort | 清空排序条件 | - |
| toggleRowSelection | 取消某一项选中项 | - |
3、配置参数（Table Attributes）
| 参数 | 说明 | 类型 | 是否必须 |
|---|
| table | 表格数据对象 | Object | 是 |
| —data | 展示数据 | Array | 是 |
| —toolbar | 表格外操作栏选中表格某行，可以将其数据传出 | Array | 否 |
| —operator | 表格内操作栏数据 | Array | 否 |
| -------show | 表格内操作栏根据状态显示 | Object | 否 |
| -------noshow | 表格内操作栏根据多种状态不显示 | Array | 否 |
| —operatorConfig | 表格内操作栏样式 | Object | 否 |
| —firstColumn | 表格首列(序号 index,复选框 selection）排列 | object | 否 |
| —total | 数据总条数 | Number | 否 |
| —pageSize | 页数量 | Number | 否 |
| —currentPage | 是否需要显示切换页条数 | Number | 否 |
| columns | 表头信息 | Array | 是 |
| ----sort | 排序 （设置：sort:true） | Boolean | 否 |
| ----renderHeader | 列标题 Label 区域渲染使用的 Function(val) 可以用 jsx 方式 | Function | 否 |
| ----bind | el-table-column Attributes | Object | 否 |
| ----noShowTip | 是否换行 （设置：noShowTip:true） | Boolean | 否 |
| ----slotName | 插槽显示此列数据（其值是具名作用域插槽 | String | 否 |
| ----------param | 具名插槽获取此行数据必须用解构接收{scope}.row是当前行数据 } | Object | 否 |
| ----canEdit | 是否开启单元格编辑功能 | Boolean | 否 |
| ----configEdit | 表格编辑配置（开启编辑功能有效） | Object | 否 |
| ----------label | placeholder 显示 | String | 否 |
| ----------editComponent | 组件名称可直接指定全局注册的组件，也可引入’element/abtd’如：‘a-input/el-input’ | String | 否 |
| ----------bind | 第三方 UI 的 Attributes，如 el-input 中的 clearable 清空功能 | Object | 否 |
| ----------event | 触发 handleEvent 事件的标志 | String | 否 |
| ----------type | 下拉或者复选框显示（select-arr/select-obj/checkbox） | String | 否 |
| ----------list | 下拉选择数据源名称 | String | 否 |
| ----------arrLabel | type:select-arr 时对应显示的中文字段 | String | 否 |
| ----------arrKey | type:select-arr 时对应显示的数字字段 | String | 否 |
| ----filters | 字典过滤 | Object | - |
| ----------list | listTypeInfo 里面对应的下拉数据源命名 | String | - |
| ----------key | 数据源的 key 字段 | String | ‘value’ |
| ----------label | 数据源的 label 字段 | String | ‘label’ |
| listTypeInfo | 下拉选择数据源 | Object | 否 |
| footer | 底部操作区（默认隐藏，使用插槽展示“保存”按钮） | slot | 否 |
| isShowFooterBtn | 是否显示保存按钮 | Boolean | 否 |
| title | 表格左上标题 | String /slot | 否 |
| isShowPagination | 是否显示分页(默认显示分页) | Boolean | 否 |
| isTableColumnHidden | 是否开启合计行隐藏复选框/单选框 | Boolean | 否 |
| isCopy | 是否允许双击单元格复制 | Boolean | true |
| rowClickRadio | 是否开启点击整行选中单选框 | Boolean | true |
| columnSetting | 是否显示设置（隐藏/显示列） | Boolean | false |
| name | 与 columnSetting 配合使用标记隐藏/显示列唯一性 | String | title |
五、
<template> <div class="t-table"> <div class="header_wrap"> <div class="header_title"> {{title}} <slot name="title" /> </div> <div class="toolbar_top"> <slot name="toolbar"></slot> <div class="header_right_wrap" :style="{marginLeft:isShow('toolbar')?'12px':0}"> <slot name="btn" /> <column-set v-if="columnSetting" v-bind="$attrs" :columns="columns" @columnSetting="v => state.columnSet = v" /> </div> </div> </div> <el-table ref="TTable" :data="state.tableData" :class="{'highlightCurrentRow':highlightCurrentRow}" v-bind="$attrs" size="default" :highlight-current-row="highlightCurrentRow" :border="table.border" :cell-class-name="cellClassNameFuc"> <el-table-column v-if="table.firstColumn.type==='selection'" :type="table.firstColumn.type" :width="table.firstColumn.width||55" :reserve-selection="table.firstColumn.isPaging||false" :label="table.firstColumn.label" :align="table.firstColumn.align||'center'" :fixed="table.firstColumn.fixed" v-bind="$attrs"></el-table-column> <el-table-column :type="table.firstColumn.type" :width="table.firstColumn.width||55" :label="table.firstColumn.label||'序列'" :fixed="table.firstColumn.fixed" :align="table.firstColumn.align||'center'" v-if="table.firstColumn.type==='index'" v-bind="$attrs"> <template #default="scope"> <span>{{isShowPagination?((table.currentPage - 1) * table.pageSize + scope.$index + 1):scope.$index + 1}}</span> </template> </el-table-column> <template v-for="(item,index) in renderColumns"> <template v-if="!item.children"> <el-table-column v-if="item.isShowCol===false?item.isShowCol:true" :key="index+'i'" :type="item.type" :label="item.label" :prop="item.prop" :min-width="item['min-width'] || item.minWidth || item.width" :sortable="item.sort||sortable" :align="item.align || 'center'" :fixed="item.fixed" :show-overflow-tooltip="item.noShowTip===false?item.noShowTip:true" v-bind="{...item.bind,...$attrs}"> <template #header v-if="item.renderHeader"> <render-header :column="item" :render="item.renderHeader" /> </template> <template #default="scope"> <template v-if="item.render"> <render-col :column="item" :row="scope.row" :render="item.render" :index="scope.$index" /> </template> <template v-if="item.slotName"> <slot :name="item.slotName" :scope="scope"></slot> </template> <template v-if="item.canEdit"> <single-edit-cell :canEdit="item.canEdit" :configEdit="item.configEdit" v-model="scope.row[scope.column.property]" :prop="item.prop" :record="scope" @handleEvent="handleEvent" v-bind="$attrs" ref="editCell"> <slot v-if="item.configEdit&&item.configEdit.editSlotName" :name="item.configEdit.editSlotName" :scope="scope" /> </single-edit-cell> </template> <div v-if="!item.render&&!item.slotName&&!item.canEdit"> <span>{{scope.row[item.prop]}}</span> </div> </template> </el-table-column> </template> <t-table-column v-else :key="index+'m'" :item="item" /> </template> <slot></slot> <el-table-column v-if="table.operator" :fixed="table.operatorConfig && table.operatorConfig.fixed" :label="(table.operatorConfig && table.operatorConfig.label) || '操作'" :min-width="(table.operatorConfig && (table.operatorConfig.width || table.operatorConfig.minWidth)) || 100" :align="table.operatorConfig && table.operatorConfig.align||'center'" class-name="operator"> <template #default="scope"> <div class="operator_btn" :style="table.operatorConfig && table.operatorConfig.style"> <el-button v-for="(item, index) in table.operator" :key="index" @click="item.fun&&item.fun(scope.row,scope.$index,state.tableData)" :type="item.type" text :style="item.style" :icon="item.icon?item.icon:''" :disabled="item.disabled" size="small" v-show="checkIsShow(scope,item)"> <template v-if="item.render"> <render-col :column="item" :row="scope.row" :render="item.render" :index="scope.$index" /> </template> <span v-if="!item.render">{{item.text}}</span> </el-button> </div> </template> </el-table-column> </el-table> <el-pagination v-show="(state.tableData && state.tableData.length) && isShowPagination" small :current-page="table.currentPage" @current-change="handlesCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="table.pageSize" layout="total, prev, pager, next, jumper" :total="table.total" v-bind="$attrs" background> </el-pagination> <footer class="handle_wrap" v-if="isShowFooterBtn&&(state.tableData&&state.tableData.length>0)"> <slot name="footer" /> <div v-if="!$slots.footer"> <el-button type="primary" @click="save">保存</el-button> </div> </footer> </div></template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
六、组件地址
七、相关文章
