手写vue移动端Table组件

已于 2024-03-20 16:23:52 修改
阅读量401 收藏 3
点赞数 7
分类专栏： table vue组件 文章标签： vue html5 前端
于 2024-03-20 14:23:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45393534/article/details/136865391
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

以下是我手写的一个小dome，移动端中需要用到Table组件又很难找到合适的，那就手写一个Table组件，可以根据自己需求来定制，更灵活，更贴合

提示：以下是本篇文章正文内容，下面案例可供参考

使用步骤

1.table组件

代码如下：

<template>
    <div :class="loading ? 'sjs-table overflowHidden' : 'sjs-table overflowAuto'" :style="{
        width:width
    }" ref="scrollContainer" @scroll="handleScroll">
        <div class="table-noData y-align" :style="{width:width}" v-if="!loading && tableData.length == 0">
            <van-image :src="require('@/images/img/noData.png')" width="10rem" height="6rem"/>
            <div class="noDataText">
                暂无数据
            </div>
        </div>
        <table v-else class="rl" style="border-collapse:collapse;" ref="sjsTable">
            <thead>
                <tr :class="{'fix-header':fixHeader}">
                    <th class="sjs-table_th"
                        v-for="(column,columnIndex) in columns"
                        :key="column.field"
                        :ref="column.field"
                        :style="{
                            zIndex:(100 - columnIndex),
                            minWidth:column.width,
                            textAlign:column.align,
                            position: column.fixed ? 'sticky' : 'static',
                            padding: column.field == 'rown' || column.field == 'serialNum' ? '0.63rem 0.31rem 0.63rem 1.88rem' : '0.63rem 0.31rem 0.63rem 0.94rem',
                        }"
                    >
                        {{ column.title }}
                    </th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(row, rowIndex) in tableData" :key="rowIndex" :class="{'trBorder':hasBorder}" @click="rowClick(row)">
                    <td  v-for="(column,columnIndex) in columns"
                        :key="column.field"
                        :ref="column.field"
                        :style="{
                            zIndex:(100 - columnIndex),
                            minWidth:column.width,
                            position: column.fixed ? 'sticky' : 'static',
                            padding: column.field == 'rown' || column.field == 'serialNum' ? '0.63rem 0.31rem 0.63rem 1.88rem' : '0.63rem 0.31rem 0.63rem 0.94rem',
                        }"
                        class="sjs-table_cell fontFamilyTCloudRegularNumber"
                    >
                        <slot :row="row" :cell="row[column.field]" :column="column"></slot>
                    </td>
                </tr>
            </tbody>
            <tfoot v-if="finished || loading || error">
                <tr>
                    <td :colspan="columns.length" class="rl">
                        <div class="van-list__finished-text table-bottom" :style="{width:width}" v-if="finished">
                            {{finishedText}}
                        </div>
                        <div class="table-loading table-bottom" :style="{width:width}" v-if="loading">
                            <van-loading size="1.5rem" class="text">加载中</van-loading>
                        </div>
                        <div class="van-list__finished-text table-bottom" :style="{width:width}" v-if="error" @click="errorLoad">
                            {{errorText}}
                        </div>
                    </td>
                </tr>
            </tfoot>
            <div v-else style="height: 50px"></div>
        </table>
    </div>
</template>

<script>
    export default {
        name: "sjsTable",
        props:{
            width:{
                type:String,
                default:'100vw'
            },
            //表头
            columns:{
                type: Array,
                required: true,
            },
            //列表数据
            tableData:{
                type: Array,
                required: true,
            },
            //表头固定
            fixHeader:{
                type:Boolean,
                default:false,
            },
            hasBorder:{
                type:Boolean,
                default:true,
            },
            error:{
                type:Boolean,
                default:false,
            },
            errorText:{
                type:String,
                default:'请求失败，点击重新加载'
            },
            loading:{
                type:Boolean,
                default:false,
            },
            finished:{
                type:Boolean,
                default:false,
            },
            finishedText:{
                type:String,
                default:'没有更多了'
            },
        },
        data(){
            return{
                isLoad:true,
                oldScrollTop:0,
            }
        },
        watch:{
            tableData(val,oldValue){
                if(oldValue.length == 0 && val.length > 0){
                    this.setFixedTable()
                }else if(oldValue.length > 0 && val.length > 0){
                    this.$nextTick(()=>{
                        this.columns.forEach((item)=>{
                            if(item.fixed){
                                let nodes = this.$refs[item.field]
                                nodes.forEach((node,i,arr)=>{
                                    this.$refs[item.field][i].style.left = arr[0].style.left;
                                })
                            }
                        })
                    })
                }else if (val.length == 0) {
                    this.$refs.scrollContainer.scrollTo(0, 0)
                }
            },
            loading(val){
              if(!val){
                  if(this.isLoad) {
                      this.isLoad = false
                      this.setFixedTable()
                  }
              }
            },
        },
        methods:{
            setFixedTable(){
                this.$nextTick(()=>{
                    let sjsTable = this.$refs.sjsTable
                    if(sjsTable) {
                        let sjsTableLeft = sjsTable.getBoundingClientRect().left
                        this.columns.forEach((item) => {
                            if (item.fixed) {
                                let nodes = this.$refs[item.field]
                                if(nodes && nodes.length > 0) {
                                    nodes.forEach((node, i, arr) => {
                                        let leftPX = node.getBoundingClientRect().left
                                        this.$refs[item.field][i].style.left = (Math.floor((leftPX - sjsTableLeft) * 100) / 100) + 'px';
                                    })
                                }
                            }
                        })
                    }
                })
            },
            //单行点击
            rowClick(row){
                this.$emit('rowClick',row)
            },

            handleScroll() {
                if(!this.finished && !this.loading) {
                    const scrollContainer = this.$refs.scrollContainer
                    const scrollTop = scrollContainer.scrollTop
                    const clientHeight = scrollContainer.clientHeight
                    const scrollHeight = scrollContainer.scrollHeight
                    //上下滚动触发 load事件
                    console.log(scrollTop,'=====',clientHeight,'=====',scrollHeight)
                    if(this.oldScrollTop !== scrollTop){
                        this.oldScrollTop = scrollTop
                        if (Math.ceil(scrollTop + clientHeight) + 10 >= scrollHeight) {
                            console.log('已经滑动到底部')
                            this.$emit('load')
                        }
                    }
                }
            },
            errorLoad(){
                this.$emit('errorLoad')
            },
        }
    }
</script>

<style scoped lang="less">

    .overflowAuto{
        overflow: auto;
        -webkit-overflow-scrolling: auto;
    }
    .overflowHidden{
        overflow: hidden;
    }
    .sjs-table{
        position: relative;

        background: #ffffff;
        table{
            min-width: 100%;
        }
        &_th{
            background: #F5F7FB;
            font-size: 0.88rem;
            font-weight: 400;
            color: #6C7074;
            line-height: 1.38rem;
        }
        &_cell{
            background: #ffffff;
            height: 3.38rem;
            font-size: 1rem;
            font-weight: 400;
            color: #2C2F33;
            line-height: 1.5rem;
        }
    }

    .fix-header{
        position: sticky;
        top: 0px;
        z-index: 1000;
    }
    .trBorder{
        border-bottom: 0.06rem solid rgba(0,0,0,0.06) ;
    }

    .table-bottom{
        /*width: 100%;*/
        /*background: #ffffff;*/
        position: sticky;
        left: 0;
    }
    .table-loading{
        //loding样式
        padding: 0.94rem;
        background-color: rgba(255,255,255,.7);
        .text {
            width: 100%;
            text-align: center;
        }
    }
    .table-noData{
        padding: 4rem 0rem;
    }
    .noDataText{
        font-size: 0.88rem;
        font-weight: 400;
        color: #ABB3BA;
        line-height: 1.38rem;
        margin-top: 0.94rem;
    }
</style>

2.运用

html：

	<sjs-table
		v-if="showTable"
		@rowClick="rowClick"
		width="100vw"
		:loading="tableLoading"
		:style="STARTDATE && ENDDATE ? 'height:calc(100vh - 5.77rem)' : 'height:calc(100vh - 5.39rem)'"
		:hasBorder="false"
		:columns="busiTableColumn"
		:fixHeader="true"
		:table-data="busiTableData"
		finished-text="没有更多了"
		:finished="finished"
		:error="error"
		@load="onLoad"
		@errorLoad="errorLoad">
		   	<template v-slot="{ row, cell,column}">
		        <div :class="'cell cell_'+column.align">
		            {{cell ? cell : '-'}}
		        </div>
		   	</template
	</sjs-table>

data(){
	return {
		tableLoading:false,
		showTable:true,
		busiTableData:[],
		busiTableColumn:[
		    {field: "NUM", title: "序号", align: "left", width: '4rem', fixed: true},
		    {field: "BOND_CODE", title: "债券代码", align: "left", width: '6rem', fixed: true},
		    {field: "BOND_ABBR", title: "债券简称", width: '8rem', align: "left"},
		    {field: "BOND_TYPE", title: "债券类型", width: '11.8rem', align: "left"},
		    {field: "ACTION", title: "业务事项", width: '7.8rem', align: "left"},
		    {field: "BOND_RATING", title: "债券评级", width: '7.8rem', align: "left"},
		    {field: "ISSUE_VALUE", title: "发行量(亿元)", width: '7.8rem', align: "left"},
		    {field: "FACE_RATE", title: "票面利率(%)", width: '7.8rem', align: "left"},
		    {field: "START_DATE", title: "业务日期", width: '13.8rem', align: "left"},
		],
		pageNo: 0,
		pageSize: 20,
		finished: false,
		error: false,
	}
}

methods:{
	onLoad() {
	    this.getTableDataLoad()
	},
	errorLoad() {
	    --this.pageNo
	    this.finished = false
	    this.error = false
	    this.getTableDataLoad()
	},
	getTableDataLoad(){
	    this.tableLoading = true
	    this.$axios.axiosPost({
	        url: ,
	        data: {
	          
	            "pageNo": ++this.pageNo,
	            "pageSize": this.pageSize,
	        }
	    }).then(res => {
	        if (res.status == '200' && res.data) {
	            if (res.data < this.pageSize) {
	                this.finished = true
	            } else {
	                this.finished = false
	            }
	            this.busiTableData = this.busiTableData.concat(res.data)
	            this.error = false
	        }else {
	            this.error = true
	        }
	    }).catch(()=>{
	        this.error = true
	    }).finally(()=>{
	        this.$nextTick(()=> {
	            this.tableLoading = false
	        })
	    })
	},
	refreshTableData(){
	    this.pageNo = 0
	    this.pageSize = 20
	    this.finished = false
	    this.error = false
	    this.busiTableData = []
	    this.getTableDataLoad()
	},
}

说明

此组件功能涵盖分页，表头固定，列固定，无数据状态，loading状态，error状态。也可以扩展出下拉刷新、虚拟滚动等等。。。
希望大家在工作中除了不断CV之外，可以手写一个贴合当前逻辑，自己也更加可以灵活运用的小组件。

豹子帅
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt无标题窗口
05-21
一个比较简单的Qt无标题窗口，基本实现了现在默认窗口自带的功能，可以用于界面美化自绘标题栏。
visual c++取掉对话框窗口的 -无标题 字样的方法
08-04
vc++取掉窗口的 -无标题 字样
无标题
02-12
无标题
VC去掉'无标题'字样的方法.zip
11-21
Visual c++去掉'无标题'字样的方法.zip
VUE手写实现移动端el-table组件
yangwq的博客
02-02 4671
最近用vue+vant进行开发，因为涉及到了表格，但vant里没有这个组件，自己就简单的封装了一下 未添加自定义CSS效果图： 使用组件：src/components/layout/table/index.vue <template> <div> <f-table :data="tableData"> <f-table-col prop="name" label="姓名"></f-table-col>
Vue实现移动端的Tab标签页组件
卡洛背心的博客
11-09 2585
移动端H5页面开发中，我们一般采用Vant组件库进行开发。有时候因为业务要求比较个性化，需要实现有自己产品风格的组件功能，这个时候在组件库的基础上进行修改是比较费时间的，反而自己动手实现组件功能，写样式比较快一些。 下面是Vant组件库的内容： 标签栏滚动 标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。 <van-tabs> <van-tab v-for="index in 8" :title="'标签 ' + index"> 内容 {{
Vue3表格（Table）
Mr Dear的博客
04-17 6636
展示行列表格数据。
vue3开发，mobile-table 适用于移动端表格
Taoqun的专栏
04-17 5064
【代码】vue3开发，mobile-table 适用于移动端表格。
vue2.0手撸table表格
weixin_44455505的博客
07-27 1247
vue2.0纯手撸表格组件
Vue移动端基础组件对话框
08-12
Vue移动端基础组件 - 对话框
详解vue移动端日期选择组件
11-28
先给大家分享一下源码：https://github.com/lx544690189/vue-mobile-calendar Build Setup # install dependencies npm install ...script src="vue-mobile-calendar.js" type="text/javascript
vue移动端弹框组件的实例
10-17
今天小编就为大家分享一篇vue移动端弹框组件的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 移动端弹层UI组件
05-27
这是一个用Vue技术封装的组件，主要在移动端使用。 1、其实前端的UI库有很多，但是我们却不需要将所有的都使用，虽然也可以单个加载。 2、弹层的组件有很多，但是在某些机型上有兼容问题，这里我单独封装了一下，只...
VUE时间范围选择的组件
godflyfly的博客
11-02 2406
VUE时间范围选择的组件
手写el-table-column组件排序效果
qq_53512708的博客
05-14 998
需求 实现产品列表筛选条件排序，记得element-plus中的el-table-column实现了对表格数据排序的效果，不过俺现在做的是移动端页面，用的vant，vant没有类似的组件，于是打算手写一个。 思路 v-for遍历显示从父组件传来配置数据信息，flex一行进行显示，当点击上三角按钮时为升序，下三角为降序，再次点击时取消排序，当三角按钮被点击时，触发自定义事件sortOptionsChange，传递给父组件对应的prop（哪一栏）和state（升序、降序、不排序）信息，父组件接收到子组件传
vue手写折叠面板 （详细代码）
IT13333的博客
01-10 1268
详细代码。
【移动端表格组件】uniapp简单实现H5，小程序，APP多端兼容表格功能，复制即用，简单易懂【详细注释版本】
热门推荐
seeeeeeeeeee的博客
03-02 1万+
由于最近需要做移动端的项目有个pc端的后台系统里面需要移一部分页面过来而里面就有很多的表格，我就开始惯例网上先找前人栽的树，我好乘凉然后找了一圈发现，不管是主流的移动端ui库或者网上自己写的帖子，或者uniapp的插件网站都没有看到符合我要求的表格，然后如果要改别人的源码那我看代码都要看很久，好切有些还奇奇怪怪的bug不兼容可能是别人使用了某些组件和插件之类的。导致我很多设置不生效。没错，我也改过别人的源码了，后来放弃了。H5，小程序兼容表格。移动端表格功能。多端兼容表格功能
vue 移动端table组件推荐
最新发布
04-21
对于您的问题，我可以为您提供一些Vue移动端Table组件推荐。建议您使用mint-ui和Vant这两个组件库中提供的Table组件，它们都是Vue的UI组件库，使用起来非常方便。此外，Element-UI、iView等组件库也提供了Table组件，您可以根据您的需求选择最适合您的组件库。希望可以帮到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值