【第10章】Vue之Element Plus常用组件

文章目录


前言

通过上一章的快速入门,我们已经学习了按钮使用,接下来学习Element Plus的常用组件:

  • 表格
  • 分页
  • 表单
  • 卡片

一、表格

1. 带斑马纹表格

bash 复制代码
<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column prop="date" label="日期" width="180" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

2. 展示

二、分页

上面已经展示了表格,当数据比较多的时候,就需要分页了。

1.国际化(中文)

代码如下(示例):

javascript 复制代码
import ElementPlus from 'element-plus'
import ElementPlusLocaleZhCn from 'element-plus/dist/locale/zh-cn'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 ,locale: ElementPlusLocaleZhCn})

2.分页代码

html 复制代码
<el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next,sizes,jumper,total"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
javascript 复制代码
//分页数据
const currentPage = ref(1)
const pageSize=10
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

3. 展示

三、表单

这里展示查询表单的使用

1. 表单代码

html 复制代码
<el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-select v-model="formInline.user" placeholder="请选择" clearable>
        <el-option label="Tom" value="0" />
        <el-option label="Jerry" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="formInline.address" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="日期">
      <el-date-picker v-model="formInline.date" type="date" placeholder="请选择日期" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
javascript 复制代码
import { ref, reactive } from 'vue'

//搜索表单
const formInline = reactive({
  user: '',
  address: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
const onReset = () => {
  console.log('reset!')
}

2. 展示

四、卡片

1. 卡片代码

html 复制代码
<template>
  <el-card style="max-width: 700px"  shadow="hover">
    <div class="demo-card">
      <span>用户信息</span><el-button  type="primary" @click="onSubmit">管理用户</el-button>
    </div>
    <div style="margin-top:10px;margin-bottom:10px">
      <hr>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-select v-model="formInline.user" placeholder="请选择" clearable>
        <el-option label="Tom" value="0" />
        <el-option label="Jerry" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="地址">
      <el-input v-model="formInline.address" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="日期">
      <el-date-picker v-model="formInline.date" type="date" placeholder="请选择日期" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column prop="date" label="日期" width="180" />
  </el-table>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
    :small="small" :disabled="disabled" :background="background" layout="prev, pager, next,sizes,jumper,total"
    :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </el-card>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

//表格数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
//分页数据
const currentPage = ref(1)
const pageSize = 10
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
//搜索表单
const formInline = reactive({
  user: '',
  address: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
const onReset = () => {
  console.log('reset!')
}
</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.demo-card{
  display: flex;
  justify-content: space-between;
}
</style>

2. 展示


总结

回到顶部

相关推荐
鸿蒙布道师14 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚19 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧22 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸28 分钟前
2、中医基础入门和养生
前端·后端
局外人LZ32 分钟前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端
鹿九巫1 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长1 小时前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
宝拉不想努力了1 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
YONG823_API1 小时前
深度探究获取淘宝商品数据的途径|API接口|批量自动化采集商品数据
java·前端·自动化