旅游网站建设风格,想建书画网站怎么做的,头部互联网公司有哪些,东莞开发游戏软件公司vue3-h5-table
介绍
适用于 vue3 ts 的 h5 移动端项目 table 组件
支持 左侧固定 滑动 每行点击回调 支持 指定列排序
链接 #xff1a;https://github.com/duKD/vue3-h5-table
效果 props说明minTableHeight表格最小高度 可选 默认600rowNum表格显示几行 可选 默认 6he…vue3-h5-table
介绍
适用于 vue3 ts 的 h5 移动端项目 table 组件
支持 左侧固定 滑动 每行点击回调 支持 指定列排序
链接 https://github.com/duKD/vue3-h5-table
效果 props说明minTableHeight表格最小高度 可选 默认600rowNum表格显示几行 可选 默认 6headerHeight头部默认高度 可选 默认 60rowHeight每行数据的默认高度 默认 100column每列数据说明 见下文tableDatas表格数据fixedHeader是否固定表头 默认true
export type columnItemType {title:string // 列名dataIndex?:string // table data key 值 width?:number // 列 宽度slotKey?:string // 插槽作用域 idsortable?:boolean //是否 支持排序align?: left|center|right // 布局key?:string // 哪个列数据 作为 唯一key 值 默认 indexrender?:(h:renderType,row:any)void // 自定义render
}
使用 实例
templatediv classpositionh5-tablerefh5TableRef:fixed-headertrue:columncolumn:table-datastableDatasrow-clickrowClickhandle-head-sort-clickhandleHeadSortClicktemplate #titleitemsection classnameAndMarkValuediv classname{{ item.select }}span classtype{{ item.type 1 ? 深 : 沪 }}/span/divdiv classmarkValue{{ item.markValue }}/div/section/templatetemplate #positionAndUseitemsection classpositionAndUsediv classposition{{ item.position }}/divdiv classuse{{ item.use }}/div/section/templatetemplate #curAndCostitemsection classcurAndCostdiv classcur{{ item.cur }}/divdiv classcost{{ item.cost }}/div/section/templatetemplate #floatAndProfititemsection classfloatAndProfitdiv classfloat{{ item.float }}/divdiv classprofit{{ item.profit }}/div/section/templatetemplate #rowDownMarksectionclassrowDownMark:style{top: cellSize(rowDownMarkTop),}v-showrowDownMarkTop 0div classrowDownMark-item clickhandelSell买入/divdiv classrowDownMark-item卖出/divdiv classrowDownMark-item行情/div/section/template/h5-table/div
/template
script setup langts
import { H5Table } from /components/h5-table;
import type {columnItemType,sortStatusType,
} from /components/h5-table/types;
import { watchEffect, ref, watch } from vue;
import { cellSize } from /components/h5-table/utils;const column: ArraycolumnItemType [{title: 班费/总值,key: id,dataIndex: nameAndMarkValue,width: 250,slotKey: title,align: left,},{title: 持仓/可用,slotKey: positionAndUse,dataIndex: positionAndUse,sortable: true,width: 200,align: right,},{title: 现价/成本,slotKey: curAndCost,dataIndex: curAndCost,// sortable: true,width: 200,align: right,},{title: 浮动/盈亏,width: 200,slotKey: floatAndProfit,align: right,},{title: 账户资产,dataIndex: count,width: 200,},
];const datas [{id: 0,select: 三年二班,type: 1,position: 27000,use: 5,000,markValue: 500,033.341,cur: 30.004,cost: 32.453,newPrice: 20,float: 18,879.09,profit: -5.45%,count: 120,121,},{id: 1,select: 四年一班,type: 1,markValue: 23,933.341,position: 28000,use: 5,000,newPrice: 20,cur: 30.004,cost: 32.453,float: 18,879.09,profit: -5.45%,count: 120,121,},{id: 2,select: 三年二班,markValue: 500,033,341,newPrice: 20,cur: 30.004,cost: 32.453,position: 27300,use: 5,000,float: 18,879.09,profit: -5.45%,count: 120,121,},{id: 3,select: 五年二班,markValue: 500,033,341,position: 27000,use: 5,000,cur: 30.004,cost: 32.453,newPrice: 20,float: 18,879.09,profit: -5.45%,count: 120,121,},{id: 4,select: 一年二班,markValue: 500,033,341,position: 27000,use: 5,000,newPrice: 20,cur: 30.004,cost: 32.453,float: 18,879.09,profit: -5.45%,count: 120,121,},{id: 5,select: 六年三班,markValue: 500,033,341,position: 37000,use: 5,000,newPrice: 20,cur: 30.004,cost: 32.453,float: 18,879.09,profit: -5.45%,count: 120,121,},{id: 6,select: 六年二班,markValue: 500,033,341,position: 37000,use: 5,000,newPrice: 20,cur: 30.004,cost: 32.453,float: 18,879.09,profit: -5.45%,count: 120,121,},{id: 7,select: 六年五班,markValue: 500,033,341,position: 37000,use: 5,000,newPrice: 20,cur: 30.004,cost: 32.453,float: 18,879.09,profit: -5.45%,count: 120,121,},
];const tableDatas refArrayany(JSON.parse(JSON.stringify(datas)));const rowDownMarkTop refnumber(0);const h5TableRef reftypeof H5Table | null(null);const rowClick (item: any, index: number) {rowDownMarkTop.value (index 1) * 100 60;if (h5TableRef.value) {h5TableRef.value.handleDom(60, index);}
};//处理排序
const handleHeadSortClick (propsKey: string, type: sortStatusType) {rowDownMarkTop.value 0;if (h5TableRef.value) {h5TableRef.value.handleDom(60, -1);}if (type 0) {tableDatas.value.splice(0, tableDatas.value.length, ...datas);return;}if (propsKey positionAndUse) {if (type 1) {tableDatas.value.sort((a, b) Number(b.position) - Number(a.position));} else {tableDatas.value.sort((a, b) Number(a.position) - Number(b.position));}}
};watch(tableDatas.value, () {console.log(watch, tableDatas);
});const handelSell () {console.log(handelSell);
};
/script
style
body {padding: 0;margin: 0 !important;
}
/style
style langscss scoped
.position {font-size: 24px;.nameAndMarkValue {padding: 10px;.name {display: inline-block;position: relative;color: #222;font-size: 32px;.type {position: absolute;top: 50%;transform: translateY(-50%);right: -40px;display: inline-block;font-size: 24px;border: 1px solid #ff858d;padding: 0 4px;color: #ff858d;}}.markValue {color: #999;font-size: 24px;}}.positionAndUse {font-size: 28px;.position {color: #222;}.use {color: #999;}}.curAndCost {font-size: 28px;.cur {color: #222;}.cost {color: #999;}}.floatAndProfit {color: red;}.rowDownMark {position: absolute;width: 100%;display: flex;z-index: 99;height: 60px;background-color: #fcfcfc;align-items: center;.rowDownMark-item {flex-grow: 1;color: #309fea;text-align: center;}}
}
/style
具体使用参考 github 项目中 app.vue 文件
