返回

秀操作！轻松实现vue+vant移动端table表格加横向滚动条

前端

移动端优雅实现表格显示

在移动端开发中，表格显示是一个常见的需求。如何优雅地实现这一需求呢？本文将介绍如何利用 Vant UI 框架轻松实现移动端表格的显示，并涵盖从基础显示到横向滚动、排序、过滤等各种需求的实现。

Vant 表格组件

Vant 是一个流行的移动端 UI 框架，提供了丰富的组件，包括表格组件。Vant 的表格组件功能强大，使用简单，可以轻松满足各种表格显示需求。

基本表格显示

要显示一个简单的表格，只需使用 Vant 的 Table 和 Column 组件：

<template>
  <van-table :data="tableData" :columns="tableColumns" />
</template>

<script>
import { Table, Column } from 'vant';

export default {
  components: {
    [Table.name]: Table,
    [Column.name]: Column
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      tableColumns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ]
    };
  }
};
</script>

这段代码实现了最基本的表格显示。

横向滚动

当表格数据量较大时，可能导致表格超出屏幕宽度。此时，可以使用横向滚动条来解决这个问题：

<template>
  <div class="van-table-wrapper">
    <van-table :data="tableData" :columns="tableColumns" />
  </div>
</template>

<script>
import { Table, Column } from 'vant';

export default {
  components: {
    [Table.name]: Table,
    [Column.name]: Column
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      tableColumns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ]
    };
  },
  mounted() {
    const tableWrapper = this.$refs.tableWrapper;
    tableWrapper.style.overflowX = 'auto';
  }
};
</script>

<style>
.van-table-wrapper {
  width: 100%;
  overflow-x: hidden;
}
</style>

排序、过滤

Vant 的表格组件还支持排序和过滤功能，可以通过设置 sortable 和 filterable 属性来实现：

<template>
  <van-table :data="tableData" :columns="tableColumns" sortable filterable />
</template>

<script>
import { Table, Column } from 'vant';

export default {
  components: {
    [Table.name]: Table,
    [Column.name]: Column
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      tableColumns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ]
    };
  }
};
</script>

分页

当表格数据量非常大时，可以使用分页功能来分批显示数据：

<template>
  <van-table :data="tableData" :columns="tableColumns" pagination />
</template>

<script>
import { Table, Column } from 'vant';

export default {
  components: {
    [Table.name]: Table,
    [Column.name]: Column
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      tableColumns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ]
    };
  }
};
</script>

常见问题解答

1. 如何在表格中添加操作按钮？

可以使用 Vant 的 Cell 组件，并设置 scopedSlots 属性：

<template>
  <van-table :data="tableData" :columns="tableColumns">
    <template #action="{ row }">
      <van-button @click="handleAction(row)">操作</van-button>
    </template>
  </van-table>
</template>

<script>
import { Table, Column, Cell, Button } from 'vant';

export default {
  components: {
    [Table.name]: Table,
    [Column.name]: Column,
    [Cell.name]: Cell,
    [Button.name]: Button
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      tableColumns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' }
      ]
    };
  },
  methods: {
    handleAction(row) {
      // 这里可以进行操作
    }
  }
};
</script>

2. 如何在表格中显示图片？

可以使用 Vant 的 Image 组件，并设置 scopedSlots 属性：

<template>
  <van-table :data="tableData" :columns="tableColumns">
    <template #image="{ row }">
      <van-image :src="row.image" />
    </template>
  </van-table>
</template>

<script>
import { Table, Column, Cell, Image } from 'vant';

export default {
  components: {
    [Table.name]: Table,
    [Column.name]: Column,
    [Cell.name]: Cell,
    [Image.name]: Image
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, image: 'https://xxx.png' },
        { name: '李四', age: 25, image: 'https://xxx.png' },
        { name: '王五', age: 30, image: 'https://xxx.png' }
      ],
      tableColumns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '图片', key: 'image' }
      ]
    };
  }
};
</script>

3. 如何在表格中使用自定义组件？

可以使用 Vant 的 Cell 组件，并设置 scopedSlots 属性：

<template>
  <van-table :data="tableData" :columns="tableColumns">
    <template #custom="{ row }">
      <my-custom-component :row="row" />
    </template>
  </van-table>
</template>

<script>
import { Table, Column, Cell } from 'vant';

export default {
  components: {
    [Table.name]: Table,
    [Column.name]: Column,
    [Cell.name]: Cell,
    MyCustomComponent: MyCustomComponent // 自定义组件
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      tableColumns: [
        { title: '姓名', key: 'name' },
        { title: '年龄', key: 'age' },
        { title: '自定义', key: 'custom' }
      ]
    };
  }
};
</script>

4. 如何在表格中进行搜索？

可以使用 Vant 的 Search 组件，并设置 scopedSlots 属性：

<template>
  <van-table :data="tableData" :columns="tableColumns">