用iview轻松搞定Table组件中的分页与多选

2023-11-05 12:07:47

作为一名前端开发人员，在项目中使用Table组件进行数据展示和管理是再常见不过的事情了。而iview作为一款功能强大、使用便捷的前端UI库，其Table组件更是深受开发者的喜爱。然而，在使用Table组件的过程中，难免会遇到各种各样的问题和挑战。今天，我就来分享一个小技巧，帮助大家轻松搞定Table组件中的分页与多选功能。

首先，我们需要安装iview及其依赖项。在终端中输入以下命令：

npm install iview --save

安装完成后，在你的项目中导入iview并将其注册为Vue插件：

import Vue from 'vue'
import iView from 'iview'
Vue.use(iView)

接下来，我们开始创建Table组件。首先，你需要在你的模板文件中添加以下代码：

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

其中，tableData是用于填充表格的数据，tableColumns是用于定义表格列的配置信息。

在你的脚本文件中，你需要定义tableData和tableColumns的数据：

export default {
  data() {
    return {
      tableData: [{
        id: 1,
        name: 'John Doe',
        age: 30
      }, {
        id: 2,
        name: 'Jane Smith',
        age: 25
      }],
      tableColumns: [{
        title: 'ID',
        key: 'id',
        width: 80
      }, {
        title: 'Name',
        key: 'name',
        width: 180
      }, {
        title: 'Age',
        key: 'age',
        width: 100
      }]
    }
  }
}

至此，我们就创建了一个简单的Table组件。接下来，我们需要实现分页功能。在iview中，我们可以通过设置Table组件的pagination属性来实现分页功能。

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

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        name: 'John Doe',
        age: 30
      }, {
        id: 2,
        name: 'Jane Smith',
        age: 25
      }],
      tableColumns: [{
        title: 'ID',
        key: 'id',
        width: 80
      }, {
        title: 'Name',
        key: 'name',
        width: 180
      }, {
        title: 'Age',
        key: 'age',
        width: 100
      }],
      pagination: {
        pageSize: 10,
        currentPage: 1,
        total: 100
      }
    }
  }
}
</script>

在上面的代码中，我们设置了pagination属性，并指定了pageSize、currentPage和total的值。pageSize表示每页显示的数据条数，currentPage表示当前页码，total表示总数据条数。

最后，我们需要实现多选功能。在iview中，我们可以通过设置Table组件的selection-type属性来实现多选功能。

<template>
  <iview-table :data="tableData" :columns="tableColumns" :selection-type="selectionType"></iview-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        name: 'John Doe',
        age: 30
      }, {
        id: 2,
        name: 'Jane Smith',
        age: 25
      }],
      tableColumns: [{
        title: 'ID',
        key: 'id',
        width: 80
      }, {
        title: 'Name',
        key: 'name',
        width: 180
      }, {
        title: 'Age',
        key: 'age',
        width: 100
      }],
      selectionType: 'checkbox'
    }
  }
}
</script>