移动端简易的table表格

效果图

先上代码

table 组件中的代码 table.vue

<template><div><div :style="tableStyle" v-scrollX="this"><div><div class="thead"><div v-for="(item,index) in columns" :key="item+index" :style="styleObject(item,1)" ><div :style="{...styleObject(item,2),'left':left+'px',background:'white'}" ><div>{{item.lable}}</div></div></div></div></div><div class="tbody" :style="tbodyStyle" v-if="dataList.length>0" @scroll="handleBodyScroll" ><div v-for="(item,index) in data" :key="item+index" class="tbody-item" :style="{'borderBottom':border?'1px solid #dcdee0':'none'}" ><div v-for="(items,indexs) in columns" :key="items+indexs" :style="styleObject(items,1)" ><div :style="{...styleObject(items,2),'left':left+'px',background:'white'}" ><div v-if="!items.render">{{item[items.key]}}</div><render-template v-if="items.render" :render="items.render" :row="item" :index="index" :column="items" ></render-template></div></div></div><div v-if="downLoad" class="downLoad">{{down_load_text}}</div></div><div v-if="dataList.length<1" class="tbody noData" :style="noDataStyle" ><span>{{noDataText}}</span></div></div></div>
</template><script>
import Vue from 'vue'
Vue.component('render-template', {name: 'renderTemplate',functional: true,props: {render: {type: Function},row: {type: Object},index: {type: [String, Number]},column: {type: Object}},render: (h, ctx) => {const params = {row: ctx.props.row,index: ctx.props.index}if (ctx.props.column) params.column = ctx.props.columnreturn ctx.props.render(h, params)}
})
export default {data() {return {left: '0',lastScrollTop: '0',downLoad: false,down_load_text: '加载中...',// columns: [//   {//     lable: '姓名', 表头标题列显示的名称//     key: 'name', 列数据对应得KEY值//     width: '50', 设置列的宽度 不写默认宽度为150//     align: 'center', 对齐方式    String  left/center/right//     fixed: 'left',列是否固定在左侧 [string, boolean]  true或者left//     render: function (h,params) { 自定义渲染列,使用Vue的render函数//       两个参数//       参数1 h//       参数2 params包含（row:当前行数据，column：当前列数据 ，index：当前数据下标）//     }//   }// ]}},props: {width: {//table的宽度type: [String, Number],default: '100%'},height: {//table的高度type: [String, Number],default: '100%'},border: {//是否显示下边框type: Boolean,default: false},columns: Array,data: Array,noDataText: {type: String,default: '没有数据了'},offset: {type: [String, Number],default: '0'}},computed: {tableStyle() {const { width, height, dataList, downLoad } = thislet style = {overflowX: 'scroll',overflowY: 'hidden',position: 'relative'}if (isNaN(Number(width))) {style.width = width} else {style.width = width + 'px'}if (isNaN(Number(height))) {style.height = `calc(${height} + 36px)`} else {style.height = Number(height) + 36 + 'px'}if (dataList.length < 1 || downLoad) style.overflowX = 'hidden'return style},tbodyStyle() {const { height } = thislet style = {}if (isNaN(Number(height))) {style.height = height} else {style.height = height + 'px'}return style},noDataStyle() {const { height } = thislet style = { height: '100px', lineHeight: '100px' }if (!isNaN(Number(height))) {style.height = height + 'px'style.lineHeight = height + 'px'}return style}},created() {},mounted() {},methods: {styleObject(item = {}, type = 1) {let style = { width: '170px' }if (type == 2) {style = { textAlign: 'left', width: '150px', padding: '10px' }if (Boolean(item.align)) style.textAlign = item.alignif (Boolean(item.fixed)) {style.position = 'absolute'style.zIndex = '10'}}if (Boolean(item.width) && isNaN(Number(item.width)))style.width = item.widthif (Boolean(item.width) && !isNaN(Number(item.width)))style.width = (type == 1 ? Number(item.width) + 20 : item.width) + 'px'return style},handleBodyScroll(event) {//table滚动事件const { offset, lastScrollTop, downLoad } = thisconst { scrollTop, scrollHeight, offsetHeight } = event.targetif (scrollTop + offsetHeight >= scrollHeight - offset &&lastScrollTop < scrollTop &&!downLoad) {//滚动到底部触发事件this.downLoad = truethis.$emit('scroll')}this.lastScrollTop = scrollTop //记录最后一次滚动的位置}},watch: {data: {handler(value) {console.log(value)this.down_load_text = '加载完成'setTimeout(() => {this.downLoad = falsethis.down_load_text = '加载中...'}, 2000)},deep: true}},directives: {scrollX: {inserted: function (el, binding, vnode) {el.addEventListener('scroll', function (e) {const that = vnode.contextthat.left = e.srcElement.scrollLeft})}}}
}
</script>
<style scoped>
.thead {display: flex;width: auto;position: relative;
}
.thead > div {background: white;position: relative;
}
.tbody {width: fit-content;overflow-x: hidden;overflow-y: scroll;position: relative;
}
.tbody .tbody-item {display: flex;width: max-content;
}
.tbody .tbody-item > div {position: relative;
}
.noData {width: 100%;background: white;text-align: center;
}
.downLoad {width: 100%;line-height: 36px;background: #f7f8fa;text-align: center;
}
</style>

index.vue 中的代码

<template><div><Table data="dataList" :columns="columns">   </div>
</template><script>
import Table from './table.vue'
export default {components:{Table},data() {return {dataList:[{name:'张一',age:'12',sex:'男'},{name:'张一',age:'20',sex:'男'},{name:'张一',age:'30',sex:'男'},{name:'张一',age:'18',sex:'女'}],columns: [{lable: '姓名',key: 'name',},{lable: '年龄',key: 'age',},{lable: '性别',key: 'sex',}]}},created() {},mounted() {},methods: {}
}
</script>
<style scoped>
</style>

1.1版本增加了合计功能

移动端简易的table表格相关推荐

vue - vue简单实现移动端的table表格
vue实现移动端的table表格,效果图如下: 主要实现功能: 1,表头字段可以进行正序倒序排序功能: 2,可以展开收起: 3,蓝色这一行是合计数据需要单独出来进行渲染,否则排序的时候此行会排乱掉: ...
layui中table监听单元格_layui table表格监听头删除不请求后台
表格js function getTable() { var table = layui.table //表格 var username=$("#username").val(); ...
android studio table居中代码_html table表格标签内容如何居中显示？表格的align属性的用法介绍...
本篇文章主要的介绍了关于HTML 表格table标签的居中使用,还有关于align属性在table表格标签中的使用方法,可以帮助表格对齐和表格中的文本对齐.接下来让我们来看看这篇文章吧. 首先我们先来 ...
微信小程序 table表格 PC版本
公司项目啊....其实小程序页面的商品列表也有宫格.列表.大图模式了,尽管描述得不那么详细,但是信息量也能看到个大概,但是领导或业务员比较喜欢看表格详细点,罗列得比较清晰. 所以要求可以通过小程序分享 ...
bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新
一.前言最近因为项目要求,开始学习并且使用React和Ant Design框架.在前端开发过程中,遇到这样一个页面:有多个tab,每个tab下都是一个table表格来进行数据展示.但,每个table ...
bootstraptable 手册_bootstrap table表格使用方法详解
本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapT ...

移动端简易的table表格

移动端简易的table表格相关推荐

最新文章

热门文章

移动端 简易的table表格

移动端 简易的table表格相关推荐

最新文章

热门文章

移动端简易的table表格

移动端简易的table表格相关推荐