四，Element-Plus常用组件一览

白鹤忘机2024-10-302024-10-30

可以自行访问官网

文本框 el-input

自行访问官网进行学习

Input 输入框 | Element Plus

基本使用

<template>
  <el-input v-model="input" style="width: 240px" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

disabled 和 readonly 可以只显示文本无法输入

<el-input v-model="data.input" style="width: 240px" disabled />

<el-input v-model="data.input" style="width: 240px" readonly />

现在我们删除Home.vue的所有代码

只写一个基本的格式,来进行这几个组件如何使用的练习

注意实际开发中，写不来就去官网，做CV程序员

<template>
  <div>

  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

前置图标 prefix-icon 和后缀图标 suffix-icon，注意需要单独导入图标

import {Calendar, Search} from "@element-plus/icons-vue"

输入框



<template>
  <div style="margin-left: 650px ;margin-bottom: 90px; margin-top: 60px; width: 200px">
       <el-input clearable style="text-align: center"  v-model="data.input" placeholder="请输入内容" :autosize="{ minRows: 2, maxRows: 4 }"
                 type="textarea"/>
     </div>
  <div style="margin-left: 650px ;margin-bottom: 90px; margin-top: 60px; width: 200px">
    <el-input clearable style="text-align: center"  v-model="data.input" placeholder="请输入内容" :prefix-icon="Search" />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import {  Search } from '@element-plus/icons-vue'


const data = reactive({
  input:'',
})

</script>



<style scoped>

</style>

下拉框 el-select

Select 选择器 | Element Plus

基础用法

<template>
  <div style="margin-top: 100px ; text-align: center">
      {{data.input}}

  </div>
  <div  style="margin-top: 200px ; text-align: center">
      <el-input v-model="data.input" style="width: 240px " placeholder="请输入" :prefix-icon="Search"  />
      <el-input :suffix-icon="Search" v-model="data.input" style="width: 240px" ></el-input>
  </div>
  <div style="text-align: center; margin-top: 20px">
    <el-button  type="primary"  @click="data.input = '' ">清空</el-button>
  </div>
<div style="text-align: center; margin-top: 20px">
  <RouterLink  to="/test">go to test</RouterLink>
</div>
  <div style="margin: 20px 0 ;width: 240px; margin: auto;margin-top: 20px">
    <el-select clearable v-model="data.value" placeholder="请选择">
      <el-option
        v-for="item in data.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>



  </div>
</template>

<script setup>

import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";


const data = reactive({

  input: '',
  options: [
    {
      value: 'Option1',
      label: 'label1',
    },
    {
      value: 'Option2',
      label: 'label2',
    },
    {
      value: 'Option3',
      label: 'label3',
    },
    {
      value: 'Option4',
      label: 'label4',
    },
    {
      value: 'Option5',
      label: 'label5',
    },
  ],
  value: ''

})

</script>

<style scoped>

</style>

v-for里面绑定的key是唯一的值

如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。

通过使用 value-key 属性，可以正确处理带有重复label的数据。这样虽然label 是重复的，但任可通过 id 来确认唯一性。

color1
同样，它也可以适用于，clearable和disable,还有多选择器加入multiple 属性即可

单选按钮el-radio

基本使用

<template>
<div style="margin-top: 20px;text-align: center" >
    <el-radio-group v-model="data.radio">
      <el-radio-button label="New York" value="New York" />
      <el-radio-button label="Washington" value="Washington" />
      <el-radio-button label="Los Angeles" value="Los Angeles" />
      <el-radio-button label="Chicago" value="Chicago" />
    </el-radio-group>
  </div>
</template>
<script setup>
import { reactive} from "vue"

const data = reactive ({
  radio:'New York' ,
   // 默认是New York
})
</script>

这个单选按钮的样子还是很好看的，可以试试

多选按钮el-checkbox

<template>
  <div>
    <el-checkbox-group v-model="data.checkList">
      <el-checkbox label="New York" value="New York" />
      <el-checkbox label="Washington" value="Washington" />
      <el-checkbox label="Los Angeles" value="Los Angeles" />
      <el-checkbox label="disabled" value="Value disabled" disabled />
      <el-checkbox
          label="selected and disabled"
          value="Value selected and disabled"
          disabled
      />
    </el-checkbox-group>
  </div>
</template>
<script setup>
  import { reactive } from "vue"

  const data = reactive({
    checkList:['New York', 'Los Angeles'],
  })
</script>

图片el-image

访问官网的el-image的使用方法，有两种，src路径的使用方法第一种

使用网络路径，如果你想要上传自己的网络图片，你得有一个图床，这里不做赘述。

具体使用方法，第一种：

<template>
  <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="data.srcList"
      :initial-index="4"
      fit="cover"
    />
  </div>
  你注意这里的src前面是没有  ：没有冒号，第二种使用方法是有冒号的
</template>

<script setup>
import { reactive }  from "vue"

  const data = reactive({
    srcList:['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg']
  })
  
</script>

第二种使用方法，使用本地图片

<template>
<div class="demo-image__preview">
    <el-image
        style="width: 100px"
        :src="lun2"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="data.srcList"
        :initial-index="4"
        fit="cover"
    />
  </div>
</template>
<script setup>
  import {reactive} from "vue";
  import lun1 from '@/assets/imgs/lun1.png'//这里的图片是你本地图片的路径，要你自己去设置图片
  const data = reactive({
  srcList: [lun1,lun2,lun3],
  })
</script>

轮播图 el-carousel

这是我个人最喜欢的，注意如果你加上type=”card”将会是卡片式轮播，你也可以选择不加上卡片式轮播，看个人喜好

<template>
  <div style="margin-top: 20px">
    <el-carousel height="200px" type="card" >
<!--      //type="card" 卡片式轮播-->
      <el-carousel-item v-for="item in data.imgs" :key="item">
        <img :src="item" alt="" style="width: 100%">
      </el-carousel-item>
    </el-carousel>
  </div>
  
</template>

<script setup>

import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import lun1 from '@/assets/imgs/lun1.png'
import lun2 from '@/assets/imgs/lun2.png'
import lun3 from '@/assets/imgs/lun3.png'

const data = reactive({

  imgs: [lun1, lun2, lun3],

})

</script>

日期时间el-data-picker

日期用法：

<el-date-picker v-model="data.date" 
  type="date" 
  format="YYYY-MM-DD" 
  value-format="YYYY-MM-DD" placeholder="请选择日期" />
  <!-- 为什么要设置value-format?因为这是返回带数据库的格式，你想要自己看懂，就得设置，一般情况下
    format和value-format是一样的格式 -->

时间用法：

<el-date-picker
    style="margin-left: 50px"
    v-model="data.date1"
    type="datetime"
    placeholder="请选择日期时间"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
/>

日期范围用法：

<el-date-picker
    style="margin-left: 50px"
    v-model="data.daterange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
/>

以上v-model绑定的值都要在data里面做说明，自行书写

表格el-table

基本使用：



<template>
  <el-table :data="data.tableData" style="width: 100%" stripe border>
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="address" label="地址" />
    <el-table-column label="操作">
      <template #default="scope">
        <!-- <template #default="scope"> 拿到行对象的数据 -->
        <el-button type="danger" circle @click="del(scope.row.date)">
          <el-icon><Delete /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { reactive } from 'vue'

const del = (date) => {
  alert("删除"+date)
}
const data = reactive({
  tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }]
})
// 数组，数组里面是对象

</script>



<style scoped>

</style>

stripe：斑马纹属性

border：边框属性

表格分页el-pagination

v-model:current-page: 当前的页码

v-model:page-size：当前的每页的个数

total：总共的数据个数

layout 是分页的各种组件的表现集合

<el-pagination
  v-model:current-page="data.currentPage"
  v-model:page-size="data.pageSize"
  :page-sizes="[5, 10, 15, 20]"
  background
  layout="total, sizes, prev, pager, next, jumper"
  :total="47"
  />

Dialog 弹窗

dialogVisible 控制弹窗显示的变量

主要作用是：新增、编辑数据

<el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
  <div style="padding: 20px">
    <div style="margin-bottom: 10px">日期：{{ data.row.date }}</div>
    <div style="margin-bottom: 10px">名称：{{ data.row.name }}</div>
    <div>地址：{{ data.row.address }}</div>
  </div>
</el-dialog>