当前位置:网站首页 > Vue.js开发 > 正文

VUE手写实现移动端el-table组件

最近用vue+vant进行开发,因为涉及到了表格,但vant里没有这个组件,自己就模仿elementUI中el-table组件的调用形式 简单的封装了一下 未添加自定义CSS效果图如下:

使用组件:src/components/layout/table/index.vue

<template> <div> <f-table :data="tableData"> <f-table-col prop="name" label="姓名"></f-table-col> <f-table-col prop="date" label="日期"></f-table-col> <f-table-col prop="address" label="地址"></f-table-col> <f-table-col prop="name" label="周期" width="16.9%"></f-table-col> </f-table> </div> </template> <script> import FTable from './FTable' import FTableCol from './FTableCol' expo
到此这篇VUE手写实现移动端el-table组件的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • vue mint-ui中swipe高度自适应2024-11-28 08:45:05
  • VUE页面不刷新时调用forceUpdate即可2024-11-28 08:45:05
  • VUE实现吸底2024-11-28 08:45:05
  • 移动端兼容安卓456实现0.5像素边框2024-11-28 08:45:05
  • vue post application/x-www-form-urlencoded传参的解决方案2024-11-28 08:45:05
  • VUE防止路由重复点击报错2024-11-28 08:45:05
  • vue中父组件传值给子组件,父组件值改变,子组件不能重新渲染2024-11-28 08:45:05
  • vue组件实现全屏倍速视频播放功能2024-11-28 08:45:05
  • VUE报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent及解决方案2024-11-28 08:45:05
  • vue获取当前页面路由2024-11-28 08:45:05
  • 全屏图片