Element-Plus中表格及分页功能

原创

已于 2024-05-28 16:28:23 修改 · 2.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #前端 #html5

于 2024-05-28 13:52:35 首次发布

导入Element-Plus

具体步骤如下：（内容参照官网：安装 | Element Plus）

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在main.js文件的引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

完成以上步骤后即可在官网组件部分查找自己想用的插件进行使用了。

VUE2版本方式

一、将官网中HTML源码复制到自己的文件中，对其中的参数进行修改。主要修改的是数据的绑定和部分样式的选择。

  <div class="demo-pagination-block">
    <div class="example-demonstration">
      <el-table :data="currentData" style="width: 100%">
        <el-table-column fixed type="index" :index="indexMethod" label="序号" width="50" />
        <el-table-column prop="nativeTip" show-overflow-tooltip label="本国子目" width="100" />
        <el-table-column prop="childrenTip" show-overflow-tooltip label="子目条文" width="100" />
        <el-table-column prop="date" label="数据版本" width="100" />

        <el-table-column fixed="right" label="操作" width="60">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.$index)">
              详细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 分页器 -->
    <el-pagination v-model:current-page="searchParams.pagenum" v-model:page-size="searchParams.pagesize" :small="small"
      :disabled="disabled" background layout="total,prev, pager, next, jumper" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

说明：这里我用了首列索引来作为表头元素，但索引值并不是渲染在页面上副本数组中的索引，而是通过该索引计算后的值（即需要渲染在页面上的值），所以通过:index="indexMethod"，绑定了indexMethod方法，该方法在methods中定义。

二、将JavaScript中的源码复制后进行修改

	export default {
		data() {
			return {
				searchParams: {
					pagesize: 5, //页面条数
					pagenum: 1, //当前页
				},
				total: 0,
				disabled: false, //是否禁选
				small: true,
				currentData: [], //渲染在页面上的副本
				tableData: [//虚拟数据
						{
						nativeTip: 'Cals',
						childrenTip: 'Tom',
						date: '2016-05-02',

					},
					{
						nativeTip: 'Sdaornia',
						childrenTip: 'Tom',
						date: '2016-05-22',

					},
					{
						nativeTip: 'Csfofif',
						childrenTip: 'Tom',
						date: '2016-05-21',

					}, {
						nativeTip: 'Gsdaw',
						childrenTip: 'Tom',
						date: '2016-05-11',

					}, {
						nativeTip: '2016-05-12',
						childrenTip: 'Tom',
						date: 'California',

					}, {
						nativeTip: 'FedDsa',
						childrenTip: 'Tom',
						date: '2016-05-04',

					},
					{
						nativeTip: 'California',