vue移动端使用table效果（超过左右拖拽滑动）

最新推荐文章于 2025-04-11 17:04:37 发布

浩星

最新推荐文章于 2025-04-11 17:04:37 发布

阅读量7.9k

点赞数 5

分类专栏： vue-插件文章标签： vue table

本文链接：https://blog.youkuaiyun.com/qq_41619796/article/details/112369341

版权

vue-插件专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一款适用于移动端的表格插件，支持内容过多时的左右拖拽滑动功能。通过引入vue-easytable库并配置相应的样式和数据，实现了包括姓名、手机号码、爱好和地址等字段的表格展示，且支持单元格编辑和排序功能。代码示例展示了如何在Vue项目中使用该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

一款很使用的移动端的table插件，内容太多左右拖拽滑动

官网入口：进入

实现效果：

实现代码：

<template>
  <div>
    <v-table
      is-horizontal-resize
      style="width:100%"
      :columns="columns"
      :table-data="tableData"
      row-hover-color="#eee"
      row-click-color="#edf7ff"
      :cell-edit-done="cellEditDone"
      @sort-change="sortChange"
      :paging-index="(pageIndex-1)*pageSize"
    ></v-table>
    <div class="mt20 mb20 bold" style="margin-top:10px;"></div>

  </div>
</template>

<script>
import 'vue-easytable/libs/themes-base/index.css'			// 引入样式
import {VTable, VPagination} from 'vue-easytable'
export default {
  props: [],
  watch: {},
  data() {
    return {
      tableData: [{
        "name": "赵伟",
        "tel": "156*****1987",
        "hobby": "钢琴、书法、唱歌",
        "address": "上海市黄浦区金陵东路569号17楼"
      },
      {
        "name": "李伟",
        "tel": "182*****1538",
        "hobby": "钢琴、书法、唱歌",
        "address": "上海市奉贤区南桥镇立新路12号2楼"
      },
      {
        "name": "孙伟",
        "tel": "161*****0097",
        "hobby": "钢琴、书法、唱歌",
        "address": "上海市崇明县城桥镇八一路739号"
      },
      {
        "name": "周伟",
        "tel": "197*****1123",
        "hobby": "钢琴、书法、唱歌",
        "address": "上海市青浦区青浦镇章浜路24号"
      },
      {
        "name": "吴伟",
        "tel": "183*****6678",
        "hobby": "钢琴、书法、唱歌",
        "address": "上海市松江区乐都西路867-871号"
      }
      ],
      columns: [{
        field: 'name',
        title: '姓名',
        width: 80,
        titleAlign: 'center',
        columnAlign: 'center',
        isEdit: true,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return `<span class='cell-edit-color'>${rowData[field]}</span>`;
        },
        isResize: true,
        isFrozen: true
      },
      {
        field: 'tel',
        title: '手机号码',
        width: 150,
        titleAlign: 'center',
        columnAlign: 'center',
        isEdit: true,
        isResize: true
      },
      {
        field: 'hobby',
        title: '爱好',
        width: 150,
        titleAlign: 'center',
        columnAlign: 'center',
        isEdit: true,
        isResize: true
      },
      {
        field: 'address',
        title: '地址',
        width: 280,
        titleAlign: 'center',
        columnAlign: 'left',
        isEdit: true,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          console.log(rowData)
          console.log(field)
          return `<span class='cell-edit-color' style="color:red">${rowData[field]}</span>`;
        },
        isResize: true
      }
      ]
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {},
  components: {},
  beforeDestroy() {
  }

}
</script>

<style lang='' scoped>

</style>