汉中城乡建设网站,在哪做网站不要钱,郑州网站制作推广,购物网站可以备案吗前言#xff1a;
由于最近需要做移动端的项目 有个pc端的后台系统里面需要移一部分页面过来 而里面就有很多的表格#xff0c;我就开始惯例网上先找前人栽的树#xff0c;我好乘凉 然后找了一圈发现#xff0c;不管是主流的移动端ui库或者网上自己写的帖子#xff0c;或者…前言
由于最近需要做移动端的项目 有个pc端的后台系统里面需要移一部分页面过来 而里面就有很多的表格我就开始惯例网上先找前人栽的树我好乘凉 然后找了一圈发现不管是主流的移动端ui库或者网上自己写的帖子或者uniapp的插件网站 都没有看到符合我要求的表格然后如果要改别人的源码那我看代码都要看很久好切有些还奇奇怪怪的bug不兼容 可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错我也改过别人的源码了后来放弃了。 所以我就直接手写了一个简单的表格展示组件配上一些我需要的功能。可以先用着了。 重点是我是原生的标签写的不是引入一大堆的插件之类的uniapp可以直接用。 想修改源码也简单。我都注释好了
效果图
小程序页面兼容可以看到点击按钮之后会拿到对应行的数据 H5页面的也是一样兼容的可能也能拿到数据 移动端手机预览效果展示了数据和点击生效滚动到底部可以触发方法可以在这里写加载第二页表格的方法
功能
1数据展示只需要往组件内传入表头和列表数据就能展示列表数据和elementul的表格一样。表头要自己配置 2固定表头上滚动的时候表头会定位在上面不动 3固定列表头内配置属性可以让这一列固定左边不动。目前只能固定一列 4行底纹就是给一行的单元格加上背景色需要在tabledata列表中添加一个字段bgcolor就可以了 5列底纹同上区别是在表头内添加一个字段bgcolor 6单元格文字颜色改变这是我们项目的要求需要拿到每个单元格的数据和指标对比大小来标红。这里在父组件就可以配置 7操作列表头添加操作列key给edit就会出现一个编辑和删除的列。不写就没有这一列。点击按钮会触发父组件的方法 8滚动到底部滚动到底部会触发父组件方法。可以做业务操作比如拿第二页的表格 9自动列宽根据表格内单元格内容的宽度来动态赋值几个宽度宽度是提前定义好的。由于表头和表体需要宽度一致所以提前设置几个档次的固定宽度。具体使用是自动根据表体或者表头哪一个长用哪一个的宽。保证数据的展示完全。当数据过长的时候会自动隐藏并省略号显示。这里我就没有加其他的功能了后期可以自行更改把这个文字加一个组件包裹就是点击可以显示全部文字的弹框那个。
引入组件
uniapp可以直接使用整体就引入了一个组件uniapp带有的scroll-view组件。需要去uniapp文档内引入一下直接插件市场下载一下就好了
代码
组件部分 写一个tableDiv的vue文件当然名字随便你换 然后把代码复制进去。
templateview classwrap!-- scrolltolower:滚动到底部触发 lower-threshold距离底部多少距离触发scrolltolower --scroll-view classscroll-view_H scroll-xtrue scroll-ytrue scrolltolowerscrollBottom:lower-threshold2view classtopview v-for(h,n) in header :keyn :class{header_dyg:true,flexs:h.flxe}:style{width:h.hWidthpx}{{h.name}}/view/viewview classbottom :style{height: tableHeightpx}view classtablebox v-for(t,s) in tableData :keysview v-for(h,n) in header :keyn:class{table_dyg:true,tdColClass:h.bgcolor,tdRowClass:t.bgcolor,flexs:h.flxe}:style{width:h.hWidthpx}!-- 不等于操作列就显示文字 --text v-ifh.key!edit :style{color:getColor(t,h)}{{t[h.key]}}/text!-- 操作列显示按钮后期用插槽 --view classuni-group v-else stylebackground-color: #fff;button classuni-button sizemini typeprimary stylemargin-right: 5px;clickeditTable(t)编辑/buttonbutton classuni-button sizemini typewarn clickdeleteTable(t)删除/button/view/view/view/view/scroll-view/view
/templatescriptexport default {props: {data: {type: Array,required: true,default: function() {return [];}},head: {type: Array,required: true,default: function() {return [];}},tableHeight: {required: true,type: [Number, String],default: function() {return 0;}}},data() {return {//表体tableData: [],//表头header: []}},onLoad() {},created() {this.tableData this.data //列表this.header this.head //表头this.tableWidth() //计算列宽},methods: {// 滚动到底部调用父组件方法scrollBottom(e) {// 滚动到底部才触发滚动到右边不触发if (e.detail.direction bottom) {this.$emit(scrollBottom)}},// 颜色对比getColor(row, col) {let color black// 传值给父组件通过父组件的方法内计算判断当前单元格数据是否需要标红然后通过回调函数返回一个color值来渲染this.$emit(getTextColor, row, col, val {color val})return color},// 修改按钮editTable(val) {this.$emit(getEdit, val)},// 删除按钮deleteTable(val) {this.$emit(getDelete, val)},// 计算单元格宽度tableWidth() {this.header.forEach((head, index) {let hw head.name.length //表头单元格宽度let dw 0 //列表单元格宽度this.tableData.forEach(data {// 如果是操作列就直接给十个字符长度也就是列宽自动150不是操作列的统一看字符串长度决定宽度let a (head.key edit ? 1234567891 : data[head.key].toString())let tw (head.key edit ? 10 : a.length)// 这里每次循环找出更大的数赋值确保dw中是表体单元格这一列中最大宽度根据最大宽度来判断单元格显示if (dw tw) {dw tw}})// 表体单元格内容宽度小于表头内容时以表头的宽度为主。根据表头的字符长度来区分宽度if (dw hw) {if (hw 3) {head[hWidth] 50} else if (hw 5) {head[hWidth] 80} else {head[hWidth] 130}} else {// 表体内容宽度大于表头内容宽度时以表体宽度为主。根据表头的字符长度来区分宽度if (dw 3) {head[hWidth] 50} else if (dw 5) {head[hWidth] 80} else {head[hWidth] 130}}})}}}
/scriptstyle langscss.wrap {width: 100%;}// 表头.top {display: flex;position: sticky; //表头向上滚动时固定住top: 0;width: 750px; //左右滚动时不会把固定的表头滚动走z-index: 100; //滑动时表头不被覆盖.header_dyg {height: 40px;text-align: center;line-height: 40px;border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;padding: 0 5px;background-color: #f5f5f6;font-size: 14px;font-weight: bold;color: #2b2b2b;flex-shrink: 0;}// 列定位固定单元格.flexs {position: sticky;left: 0;background-color: #f5f5f6;z-index: 10;}}// 表格列表.bottom {width: 750px;.tablebox {display: flex;font-size: 14px;.table_dyg {height: 30px;text-align: center;line-height: 30px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;padding: 0 5px;flex-shrink: 0;}// 列定位固定单元格.flexs {position: sticky;left: 0;background-color: #fff;z-index: 10;}}}// 列的颜色.tdColClass {background-color: #d9edf7;}// 行的颜色.tdRowClass {background-color: #afdfe4;}
/style
然后父组件引入子组件使用
templateview classbox!-- 表格组件参数解释getTextColor调用方法判断数据后返回对比颜色可以改变单元格文字的颜色 --!-- getEdit点击表格中编辑按钮会触发的方法 getDelete点击表格中删除按钮会触发的方法 scrollBottom滚动到底部时触发--!-- data列表数据格式和elementul表格一样head表头数据格式[{name:列名,key:对应列表的key,bgcolor:1代表这一列添加背景色,flxe:1代表这一列固定}],tableHeight:表格表体高度 --tableDiv scrollBottomscrollBottom getTextColorgetRedText getEditeditTable getDeletedeleteTable :datatableData :headheader :tableHeight310/tableDiv/view
/templatescriptimport tableDiv from ./tableDiv.vueexport default {components: {tableDiv},data() {return {//表体tableData: [{date: 2020-09-01,name: 11,address: 上海市普陀区金沙江路 1518 弄,age: 18,bgcolor: 1}, {date: 2020-09-02,name: 22,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-03,name: 33,address: 上海市普陀区金沙江路 1519 弄,age: 18}, {date: 2020-09-04,name: 44,address: 上海市普陀区金沙江路 1516 弄,age: 18}, {date: 2020-09-05,name: 55,address: 上海市普陀区金沙江路 1518 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}, {date: 2020-09-06,name: 66,address: 上海市普陀区金沙江路 1517 弄,age: 18}],//表头header: [{name: 日期,key: date,flxe: 1 //固定的列只能有一个列}, {name: 姓名,key: name,bgcolor: 1 //列底纹}, {name: 地址,key: address}, {name: 年龄,key: age}, {name: 年龄,key: age}, {name: 操作,key: edit}]}},methods: {// 自定义事件方法业务逻辑判断是否需要标红然后回调给子组件颜色getRedText(row, col, callback) {let color black// 判断值是否需要标红if (row[col.key] 22) {color red} else {color black}// 通过回调函数返回值callback(color);},// 编辑按钮editTable(val){console.log(val,编辑);uni.showToast({title: val.date编辑})},// 删除按钮deleteTable(val){console.log(val,删除);uni.showToast({title: val.date删除})},// 滚动到底部scrollBottom(){uni.showToast({title: 滚动到底部了})console.log(滚动到底部了);}}}
/scriptstyle langscss/style
