Vue实战——Element Plus入门案例

一、Element Plus介绍

官网：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

1.快速入门

执行命令（在当前工程的目录下）：npm install element-plus --save

2.案例项目

1. 创建一个工程化的Vue项目
2. Vue项目安装依赖
3. 启动项目

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

    const formInline = reactive({
    user: '',
    region: '',
    date: '',
    })

    const onSubmit = () => {
    console.log('submit!')
    }
    const currentPage4 = ref(1)
 	const pageSize4 = ref(5)
	const small = ref(false)
	const background = ref(false)
	const disabled = ref(false)
	const total = ref(20)

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

    import {
    Delete,
    Edit
  	} from '@element-plus/icons-vue'

  	const tableData = [
    {
      title: '骄傲是否',
      catagory: '时事',
      time: '2001-09-23',
      state:'已发布'
    },
    {
      title: '骄傲是否',
      catagory: '时事',
      time: '2001-09-23',
      state:'已发布'
    },
    {
      title: '骄傲是否',
      catagory: '时事',
      time: '2001-09-23',
      state:'已发布'
    },
    {
      title: '骄傲是否',
      catagory: '时事',
      time: '2001-09-23',
      state:'已发布'
    },
    {
      title: '骄傲是否',
      catagory: '时事',
      time: '2001-09-23',
      state:'已发布'
    }
  ]
  </script>
<template>
    <el-card class="box-card">
      <div class="card-header">
        <span>文章管理</span>
        <el-button type="primary">发布文章</el-button>
      </div>
      <div style="margin-top: 20px;">
        <hr>
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">

<el-form-item label="文章类型">
  <el-select
    v-model="formInline.region"
    placeholder="文章类型"
    clearable
  >
    <el-option label="时事" value="时事" />
    <el-option label="篮球" value="篮球" />
  </el-select>
</el-form-item>
<el-form-item label="发布状态">
  <el-select
    v-model="formInline.region"
    placeholder="发布状态"
    clearable
  >
    <el-option label="已发布" value="已发布" />
    <el-option label="草稿" value="草稿" />
  </el-select>
</el-form-item>

<el-form-item>
  <el-button type="primary" @click="onSubmit">搜索</el-button>
</el-form-item>
<el-form-item>
  <el-button type="default" @click="onSubmit">重置</el-button>
</el-form-item>
</el-form>

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="title" label="文章标题" />
    <el-table-column prop="catagory" label="分类" />
    <el-table-column prop="time" label="发表时间" />
    <el-table-column prop="state" label="状态" />
    <el-table-column prop="address" label="操作"  width="180">
        <el-row>
            <el-button type="primary" :icon="Edit" circle />
            <el-button type="danger" :icon="Delete" circle />
        </el-row>
    </el-table-column>
</el-table>
<el-pagination
    class="el-p"
  v-model:current-page="currentPage4"
  v-model:page-size="pageSize4"
  :page-sizes="[5, 10, 15, 20]"
  :small="small"
  :disabled="disabled"
  :background="background"
  layout="jumper,total, sizes, prev, pager, next"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
  </el-card>


  </template>

  <style scoped>
    .el-p{
        margin: 20px;
        display: flex;
        justify-content: end;
    }
    .card-header{
        display: flex;
        justify-content: space-between;
    }
  </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146