建立网站大概投入,互联网行业前景,网站注册域名查询,网站开发 分工本文提供增强版table表格组件体验,打造跨端表格的新标杆. uv3-table#xff1a;一款基于uniappvue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选#xff0c;自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5小程序端App端。
提供… 本文提供增强版table表格组件体验,打造跨端表格的新标杆. uv3-table一款基于uniappvue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5小程序端App端。
提供详细示例代码直接复制运行即可 引言
uv3-table使用示例uv3Table编码实现 如下图H5小程序App端多端运行一致。 uv3-table表格插件是最新原创项目uniapp-os后台管理系统的一个独立版组件。
由于在开发uni-os手机后台系统需要用到table表格组件。无奈uniapp官方及插件市场table表格组件无论功能及UI上都不满足要求于是自己爆肝一个多日夜开发了一款全新uniappvue3综合表格组件。 目前该项目已经出阶段性成果接近尾声了相信很快就能和大家见面到时也会做一些技术分享敬请期待 uv3-table使用示例
将uv3-table组件放到uniapp项目components目录下无需在页面再次引入即可使用。 基础用法
uv3-table :columnscolumns :dataSourcedata.list /
自定义条纹样式
uv3-table:columnscolumns:dataSourcedata.liststripestripeColor#eeepadding5pxheight450rpx
/
综合用法(固定表头/列、自定义插槽内容)
script setupimport { ref } from vueimport Mock from mockjsconst columns ref([{type: selection, align: center, width: 80, fixed: true}, // 多选{type: index, label: ID, align: center, width: 80, fixed: true}, // 索引序号{prop: author, label: 作者, align: center, width: 120},{prop: title, label: 标题, align: left, width: 350},{prop: image, label: 图片, align: center, width: 120},{prop: switch, label: 推荐, align: center, width: 100},{prop: tags, label: 标签, align: center, width: 100},{prop: rate, label: 评分, align: center, width: 200},{prop: date, label: 发布时间, align: left, width: 250}, // 时间{prop: action, label: 操作, align: center, width: 150, fixed: right}, // 操作])const data ref(Mock.mock({total: 100,page: 1,pagesize: 10,list|20: [{id: id(),author: cname(),title: ctitle(10, 20),image: //api.yimian.xyz/img?idinteger(100, 300),switch: boolean(),tags|1: [admin, test, dev],rate: integer(1, 5),date: datetime(),color: color(),}]}))
/script
uv3-table:dataSourcedata.list:columnscolumns:headerBoldtrueheaderBackground#ecf5ffstripeborderpadding5pxmaxHeight650rpxrowClickhandleRowClickselecthandleSelect
!-- 自定义header插槽内容 --template #headerCell{ key, col, index }template v-ifkey titleview {{col.label}} input placeholder搜索 sizesmall //view/templatetemplate v-else-ifkey dateuni-icons typecalendar/uni-icons {{col.label}}/templatetemplate v-else{{col.label}}/template/template!-- 自定义body插槽内容(由于小程序不支持动态:name插槽通过key标识来自定义表格内容) --template #default{ key, value, row, col, index }template v-ifkey imageuv-image :srcvalue lazyLoad observeLazyLoad clickpreviewImage(value) //templatetemplate v-else-ifkey switchswitch :checkedvalue //templatetemplate v-else-ifkey tagsuv-tags :textvalue :colorrow.color :borderColorrow.color plain sizemini //templatetemplate v-else-ifkey rateuni-rate :valuevalue size14 readonly //templatetemplate v-else-ifkey actionuni-icons typecompose color#00aa7f clickhandleEdit(row) /uni-icons typetrash color#ff007f clickhandleDel(row) //templatetemplate v-else{{value}}/template/template
/uv3-table rowClick点击表格行会返回该行数据。 select单选/多选会返回表格选中数据。 uv3Table编码实现 uv3-table表格参数配置
const props defineProps({// 表格数据dataSource: {type: Array,default() {return []}},/*** params {string} background 对应列背景色* params {string} type 对应列类型(多选selection 索引index)* params {string} label 显示的列标题* params {string} prop 对应的列字段名* params {string} align 列水平对齐方式(left center right)* params {number|string} width 对应列宽度* params {boolean|string} fixed 该列固定到左侧(fixed:true|left)或右侧(fixed:right)* params {string} columnStyle 对应列自定义样式* params {string} className/class 表格列的类名className*/columns: {type: Array,default() {return []}},// 表格宽度width: { type: [Number, String] },// 表格高度height: { type: [Number, String] },// 表格最大高度maxHeight: { type: [Number, String] },// 是否为斑马纹stripe: { type: [Boolean, String] },// 斑马纹背景stripeColor: { type: String, default: #fafafa },// 是否带有边框border: { type: [Boolean, String] },// 列宽度(推荐默认rpx)columnWidth: { type: [Number, String], default: 200 },// 单元格间距padding: { type: String, default: 5rpx 10rpx },// 是否显示表头showHeader: { type: [Boolean, String], default: true },// 表头背景色headerBackground: { type: String, default: #ebeef5 },// 表头颜色headerColor: { type: String, default: #333 },// 表头字体加粗headerBold: { type: [Boolean, String], default: true },// 表格背景色background: { type: String, default: #fff },// 表格颜色color: { type: String, default: #606266 },// 空数据时显示的文本内容也可以通过 #empty 设置emptyText: { type: String, default: 暂无数据 }
})
模板结构如下
templateview...!-- 表头 --view v-ifshowHeader :viewv-for(col, cindex) in columns:keycindex:...clickhandleHeaderClick(col).../view/view!-- 表体 --view .../view/view
/template
Props参数 columns 参数 background指定对应列的背景色可用于为特定列设置独特的视觉效果以突出显示重要信息或区分不同的数据类型。 type定义对应列的类型支持 selection多选和 index索引两种特殊类型。selection 类型用于创建多选列允许用户选择多行数据index 类型用于显示行的索引或序号方便用户快速定位数据。 label设置显示在表头的列标题清晰地描述该列数据的含义帮助用户理解表格内容。 prop绑定对应的列字段名将表格数据中的特定属性与该列关联确保数据正确展示。 align控制列内容的水平对齐方式可选值为 left左对齐、center居中对齐和 right右对齐以满足不同数据的展示需求。 width设定对应列的宽度可以根据数据内容的长度和表格布局的需求进行调整以实现合理的空间分配。 fixed将该列固定到表格的左侧或右侧支持 left、right 或布尔值 true默认固定到左侧。固定列在表格滚动时保持不动方便用户查看关键信息。 columnStyle为对应列提供自定义样式允许通过 CSS 样式对象来调整字体、颜色、边框等视觉效果以实现高度个性化的表格设计。 className/class指定表格列的类名通过添加自定义的 CSS 类可以进一步细化列的样式实现复杂的布局和交互效果。
事件 headerClick当用户点击表头时触发可用于实现排序、筛选等操作。通过监听该事件可以获取被点击的表头信息进而根据业务逻辑对表格数据进行处理。 rowClick点击表格行时触发返回该行的数据。该事件适用于行级别的交互操作如查看详情、编辑数据或根据行数据执行特定的业务流程。 select在多选或单选场景下触发返回表格选中的数据。通过该事件可以获取用户选择的行数据用于批量操作、数据导出或其他业务处理。
自定义插槽 headerCell自定义表头内容的插槽允许开发者根据需求定制表头的显示效果如添加图标、按钮或复杂的表头结构以增强表格的交互性和视觉效果。 default默认表体内容的插槽用于自定义表格单元格的展示方式。可以根据数据类型、业务逻辑或用户需求灵活地调整单元格的内容和样式。 empty无数据插槽当表格数据为空时展示自定义的提示文字或占位图。通过该插槽可以为用户提供清晰的反馈告知其当前表格中没有数据并可引导用户进行下一步操作。
