Element-Plus 组件库使用

1.Button 按钮组件 KView.vue

https://element-plus.org/zh-CN/component/button.html

1. type 切换按钮主题色（primary蓝 success绿 info灰 warning黄 danger红）

2. plain 镂空按钮

3. round 胶囊型按钮

4. circle 圆形按钮

5. disabled 禁用按钮

6. link 链接按钮

<template>
  <h1>El-按钮组件</h1>
  <!-- 如果按钮上有样式效果,说明El组件库引入成功了 -->
  <!-- 如果<el-button有提示,说明IDEA的element插件安装成功了 -->
  <!-- 参照笔记完成以上两步,注意:需要重启IDEA! -->
  <el-button>按钮</el-button>
  <!-- type切换按钮主题色 primary蓝 danger红 info灰 success绿 warning黄-->
  <!-- plain镂空按钮 round圆角按钮 circle圆形按钮 disabled禁用按钮 -->
  <el-button type="primary">蓝按钮</el-button>
  <el-button type="danger" plain>红按钮</el-button>
  <el-button type="info" round>灰按钮</el-button>
  <el-button type="success" circle>绿按钮</el-button>
  <el-button type="warning" disabled>黄按钮</el-button>
  <hr>
  <!-- 链接按钮 -->
  <a href="https://www.baidu.com">
    <el-button link>链接按钮</el-button>
  </a>
  <a href="https://www.tmooc.cn">
    <el-button link type="primary">达内</el-button>
  </a>

  <el-button :icon="Search" circle />
  <el-button type="primary" :icon="Edit" circle />
  <el-button type="success" :icon="Check" circle />
  <el-button type="info" :icon="Message" circle />
  <el-button type="warning" :icon="Star" circle />
  <el-button type="danger" :icon="Delete" circle />
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

<style scoped>

</style>

1. Icon 图标组件 LView.vue

2. 在如下网址：找到并复制图中的代码

https://element-plus.org/zh-CN/component/icon.html 

 

1. 在 main.js 中粘贴刚刚复制的代码（引入 EL 图标相关内容 ）

1. main.js 完整代码（这是一次性的代码，无需多次配置）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//1.引入element-plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//3.引入element-plus图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
//4.遍历ElementPlusIconsVue图标库,将其中所有的图标组件[key, component]依次注册到app中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//2.app.use(ElementPlus) 使用Element-plus组件库
app.use(ElementPlus).use(store).use(router).mount('#app')

1. 直接左键单击图标，就可以自动复制该图标的代码

 

1. 在 LView.vue 中测试图标的代码

<template>
  <h1>El-图标组件</h1>
  <el-icon><Message /></el-icon>
  <!-- 注意:图标库需要在main.js中引入并注册! -->
  <!-- size修改图标尺寸 color修改图标颜色 -->
  <!-- 注意:这里的图标并不是传统的.png或.jpg等图片,是SVG矢量图
   SVG可缩放矢量图形,可以直接嵌入在html中,任何分辨率下都可以清晰显示-->
  <el-icon size="50px" color="red"><Delete /></el-icon>
</template>

<script setup></script>

1. Message 消息提示组件 MView.vue

https://element-plus.org/zh-CN/component/message.html 

<template>
  <h1>El-消息提示组件</h1>
  <el-button @click="f(1)">成功消息</el-button>
  <el-button @click="f(2)">警告消息</el-button>
  <el-button @click="f(3)">错误消息</el-button>
  <el-button @click="f(4)">普通消息</el-button>
  <el-button @click="f(5)">可关闭的消息</el-button>
</template>

<script setup>
//注意! ElMessage需要导入!
import {ElMessage} from "element-plus";

const f = (x)=>{
  switch (x){
    case 1 : ElMessage.success('成功的提示消息');break;
    case 2 : ElMessage.warning('警告的提示消息');break;
    case 3 : ElMessage.error('错误的提示消息');break;
    case 4 : ElMessage('普通的提示消息');break;
    case 5 : ElMessage.error({message:'可关闭的提示消息',showClose:true});
  }
}
</script>

<style scoped>

</style>

1. Radio 单选组件 NView.vue

 https://element-plus.org/zh-CN/component/radio.html

1. 所有单选项需要放到el-radio-group中，且需要在group上设置双向绑定用来提交值

2. el-radio 圆形单选项

3. el-radio-button 按钮形单选项

4. value用来设置当前单选选项的值

5. label用来设置当前单选选项显示的文本，也可以直接写在标签之间

<template>
  <h1>El-单选组件</h1>
  <el-radio-group v-model="edu">
    <!-- value保存当前选项的值 label保存当前选项显示的文本   -->
    <el-radio value="初中" label="学历:初中"></el-radio>
    <el-radio value="高中" label="学历:高中"></el-radio>
    <el-radio value="本科" label="学历:本科"></el-radio>
    <el-radio value="硕士">学历:硕士</el-radio>
  </el-radio-group>
  <h4>您选中的学历是:{{edu}}</h4>
  <hr>
  <el-radio-group v-model="pr">
<!--  <el-radio-button v-for="p in arr">{{p.title}}</el-radio-button>-->
    <el-radio-button v-for="p in arr" :value="p.price" :label="p.title"></el-radio-button>
  </el-radio-group>
  <h4>您选中的价格是:{{pr}}</h4>
</template>

<script setup>
import {ref} from "vue";

const edu = ref('本科');

const pr = ref('2500');
//准备数组用来存放原始数据
const arr = ref([
  {title:'五粮液',price:500},
  {title:'茅台',price:2500},
  {title:'汾酒',price:330},
  {title:'梦之蓝',price:368}
]);
</script>

<style scoped>

</style>

1. Select 选择器组件 OView.vue

https://element-plus.org/zh-CN/component/select.html 

1. 所有下拉选项需要放到el-select中，且需要设置双向绑定用来提交值

2. value用来设置当前选项的值

3. label用来设置当前选项显示的文本，也可以直接写在标签之间

<template>
  <h1>El-选择器组件</h1>
  <el-select placeholder="请选择一个你喜欢的城市" style="width:50%;" v-model="city">
    <el-option label="北京" value="bj"></el-option>
    <el-option label="西湖" value="xh"></el-option>
    <el-option label="潍坊" value="wf"></el-option>
    <el-option value="cc">长春</el-option>
  </el-select>
  <h4>您选择的城市是:{{city}}</h4>
</template>

<script setup>
import {ref} from "vue";

const city = ref('xh');
</script>

<style scoped>

</style>

1. Switch 开关组件 PView.vue

https://element-plus.org/zh-CN/component/switch.html 

<template>
  <h1>开关组件</h1>
  <!-- 开关组件默认由boolean类型来控制开关的 true打开 false关闭 -->
  <!-- 还可以使用active-value和inactive-value来自定义开关的打开和关闭状态
  额外支持string与number类型 -->
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <hr>
  是否为管理员<el-switch v-model="isAdmin"></el-switch>
  是否显示图片<el-switch v-model="isShow"></el-switch>
  <hr>
  <img src="fcq.jpg" width="200" v-if="isShow">
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
  <el-switch v-model="numStr" :active-value="'1'" :inactive-value="'0'"></el-switch>
  <el-switch v-model="str" active-value="aa" inactive-value="bb"></el-switch>
</template>

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

const value1 = ref(true)
const value2 = ref(true)
const isAdmin = ref(true)
const isShow = ref(false)
const num = ref(0)
const numStr = ref('1')
const str = ref('bb')
</script>

<style scoped>

</style>

1. Form 表单组件 QView.vue

https://element-plus.org/zh-CN/component/form.html 

• 表单所有内容需要写在el-form中

• 每个表单项需要写在el-form-item中

• label-width="80" 控制所有表单项的宽度

• show-password 可以设置密码输入框的密码隐藏或显示

• 注意：双向绑定必须加在控件本身上!而不是加在el-form-item上!

  <template>
    <h1>El-表单组件</h1>
    <h2>注册页面</h2>
    <!-- 要求:接收用户输入的数据,在控制台打印完整的user对象的信息 -->
    <el-form label-width="80" style="width: 500px;margin: 0 auto;">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.gender">
          <el-radio-button label="男" value="1"></el-radio-button>
          <el-radio-button label="女" value="0"></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所在地">
        <el-select v-model="user.city" placeholder="请选择你心仪的城市">
          <el-option label="成都" value="cd"></el-option>
          <el-option label="兰州" value="lz"></el-option>
          <el-option label="太原" value="ty"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="管理员">
        <el-switch v-model="user.isAdmin"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="show()">注册</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
    import {ref} from "vue";
  
    const user = ref({
      username:'',
      password:'',
      gender:'',
      city:'',
      isAdmin:false
    });
    const show = ()=>{
      console.log(user.value);
    }
  </script>
  
  <style scoped>
  
  </style>

• Table 表格组件 RView.vue

https://element-plus.org/zh-CN/component/table.html 

• :data 表格数据绑定

• prop 表格列对应的源数据属性名

• label 表格列的标题

• width 当前列的宽度

• type="index" 显示编号,从1开始

• 如果写自定义内容,需要加到template标签中

  • 从scope中可获取 $index 表示当前行数据的索引值,默认从0开始

  • 从scope中可获取 row 表示当前行数据

<template>
  <h1>表格组件</h1>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="住址" />
  </el-table>
  <hr>
  <el-table :data="arr" style="width:600px;margin: 0 auto;">
    <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
    <el-table-column label="姓名" prop="name" align="center"></el-table-column>
    <el-table-column label="工资" prop="salary" align="center"></el-table-column>
    <el-table-column label="岗位" prop="job" align="center"></el-table-column>
    <el-table-column label="操作">
      <!-- 自定义列模版template -->
      <!-- #default 定义了一个插槽(slot)名为default
      scope就是一个对象,该对象是一个范围对象,可保存上下文数据-->
      <template #default="scope">
        <!-- scope对象保存了当前行数据的索引$index(从0开始)与当前行完整的对象scope.row -->
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";

//编写一个表格,有姓名 工资 岗位三列,把表中的数据展示在页面上
const arr = ref([
  {name:'张三',salary:'3000',job:'维修员'},
  {name:'李四',salary:'4000',job:'销售员'},
  {name:'王五',salary:'5000',job:'护林员'},
  {name:'赵六',salary:'6000',job:'程序员'}
]);

const del = (index,emp)=>{
  if (confirm('是否删除?'+emp.name)){
    arr.value.splice(index,1);
  }
}

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>

<style scoped>

</style>

1. Menu 菜单组件 SView.vue

https://element-plus.org/zh-CN/component/menu.html 

 

• mode="" 修改菜单模式 vertical默认垂直 horizontal水平

• background-color="" 背景颜色

• text-color="" 文字颜色

• active-text-color="" 激活文字颜色

• default-active="5" 设置默认激活项

• @select="handleSelect" handleSelect = (index, indexPath) => {}

  • index表示选中的当前这个菜单项的index值

  • indexPath表示到达当前选中的菜单项需要经过的路径

<template>
  <h1>菜单组件</h1>
  <el-menu mode="horizontal" background-color="#4F8DFE"
           text-color="#fff" active-text-color="#ff0"
           @select="handleSelect">
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">免费课</el-menu-item>
    <el-menu-item index="3">直播课</el-menu-item>
    <el-menu-item index="4">精品课</el-menu-item>
    <el-menu-item index="5">线上班</el-menu-item>
    <el-sub-menu index="6">
      <template #title>线下班</template>
      <el-menu-item index="6-1">JSDTN2405</el-menu-item>
      <el-menu-item index="6-2">JSDTN2406</el-menu-item>
      <el-menu-item index="6-3">JSDTN2407</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script setup>
//index指的是用户选择的是哪个菜单项,对应菜单项index的值,比如 3表示选择了"直播课"
//indexPath指的是如何到达当前这个菜单项,比如[6,6-2]可到达"JSDTN2406"
const handleSelect = (index, indexPath) => {
  console.log(index, indexPath);
}
</script>

<style scoped>

</style>

1. Layout 布局组件 TView.vue

https://element-plus.org/zh-CN/component/layout.html#layout 

• el-row 均匀等分24份

• el-col :span="n" 表示当列占n份

• :gutter="20" 天沟,其实指的是列与列之间的内间距

• :offset="n" 列偏移,默认值为0,默认靠左,n为几表示向右移动几列

• 布局嵌套:内层充当父元素的元素需要重新作为el-row,它的子元素瓜分它的24列

  <template>
    <h1>布局组件</h1>
    <el-row :gutter="20">
      <el-col :span="6">测试数据</el-col>
      <el-col :span="6">测试数据</el-col>
      <el-col :span="6">测试数据</el-col>
      <el-col :span="6">测试数据</el-col>
    </el-row>
  
    <h3>两张图</h3>
    <el-row :gutter="10">
     <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
     <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
    </el-row>
  
    <h3>六张图</h3>
    <el-row :gutter="10">
      <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
      <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
      <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
      <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
      <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
      <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    </el-row>
  
    <h3>三张图 宽度为1:2:3</h3>
    <el-row :gutter="10">
      <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
      <el-col :span="8"><img src="2024.png" style="width:100%;"></el-col>
      <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
    </el-row>
  
    <h3>8个等分的列,每列显示数字1 2 3 ...8</h3>
    <el-row :gutter="10">
      <el-col :span="3" v-for="i in 8">{{i}}</el-col>
    </el-row>
  
    <h3>列偏移</h3>
    <el-row>
      <!-- :offset="2" 列偏移,默认值为0,默认靠左,写几就是向右移动几列 -->
      <el-col :span="20" :offset="2"><img src="rich.jpg" style="width:100%;"></el-col>
    </el-row>
    <!-- 要求：占12列且居中 -->
    <el-row>
      <el-col :span="12" :offset="6"><img src="rich.jpg" style="width:100%;"></el-col>
    </el-row>
    <!-- 布局嵌套 -->
    <el-row>
     <el-col :span="12" style="border: 3px solid #f00;">左侧</el-col>
     <el-col :span="12" style="border: 3px solid #0f0;">
       <!-- 嵌套时，一定要把当前元素再看作是一个row,24份,再进行分配!    -->
       <el-row>
         <el-col :span="8" style="border: 3px solid #00f;">1</el-col>
         <el-col :span="8" style="border: 3px solid #ff0;">2</el-col>
         <el-col :span="8" style="border: 3px solid #000;">3</el-col>
       </el-row>
     </el-col>
    </el-row>
  </template>
  
  <script setup>
  
  </script>
  
  <style scoped>
  
  </style>

• Container 容器组件 UView.vue

• https://element-plus.org/zh-CN/component/container.html

目前我们能接触到的最复杂的页面布局如下图所示：

后面写页面的时候也是找到对应的布局，复制代码去修改即可

 

<!--El-容器组件-->
<template>
  <div>
    <el-container>
      <!-- 侧边栏  -->
      <el-aside width="200px">
        <el-menu>
          <el-menu-item index="1">用户管理</el-menu-item>
          <el-menu-item index="2">车辆管理</el-menu-item>
          <el-menu-item index="3">围栏管理</el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧主体内容 -->
      <el-container>
        <el-header>
          <h1 style="background-color: #0aa1ed;color:#fff;">智慧车辆运营系统-IVOS</h1>
        </el-header>
        <el-main>
          <el-table :data="arr">
            <el-table-column type="index" label="编号" align="center" width="80"></el-table-column>
            <el-table-column prop="brand" label="品牌" align="center"></el-table-column>
            <el-table-column prop="model" label="型号" align="center"></el-table-column>
            <el-table-column prop="license" label="车牌号" align="center"></el-table-column>
            <el-table-column prop="color" label="颜色" align="center"></el-table-column>
            <el-table-column prop="km" label="里程数" align="center"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";

const arr = ref([
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
    {brand: "奔驰", model: "C级", license: "京A88888", color: "白色", km: 10000},
]);
</script>

<style scoped>
</style>

1. Carousel 轮播图组件 VView.vue

https://element-plus.org/zh-CN/component/carousel.html 

• 所有轮播图项 el-carousel-item 必须放到轮播图 el-carousel 标签中

• trigger="" 默认值hover悬停切换轮播项,也可设置成click点击切换

• type="card" 可以修改轮播图以卡片形式切换

  <template>
    <h1>El-走马灯组件</h1>
    <el-carousel style="width: 380px;">
      <el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item>
    </el-carousel>
  
    <!-- trigger="click" 鼠标点击下方指示灯时触发切换,默认悬停切换 -->
    <el-carousel style="width: 380px;" trigger="click">
      <el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item>
    </el-carousel>
  
    <!-- type="card" 轮播图使用卡片样式 -->
    <el-carousel style="width: 900px;" type="card">
      <el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item>
      <el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item>
    </el-carousel>
  </template>
  
  <script setup>
  
  </script>
  
  <style scoped>
  
  </style>

• Card 卡片组件 WView.vue

 https://element-plus.org/zh-CN/component/card.html

<template>
  <h1>El-卡片组件</h1>
  <el-row :gutter="10">
    <el-col :span="6" v-for="item in 4">
      <el-card>
        <img src="mwzz.png" style="width:100%;">
        <p>《宝可梦》:妙蛙种子</p>
        <div style="margin-bottom: 40px;">
          <span style="float: left;">属性:草、毒</span>
          <span style="float: right;">好友:小火龙</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

</script>

<style scoped>

</style>

1. DateTimePicker 日期时间选择器 XView.vue

https://element-plus.org/zh-CN/component/datetime-picker.html 

 

type属性 定义选择器的类型

• date 日期选择器

• datetimerange 日期时间范围选择器

  • range-separator="到" 范围选择器中的分隔符

  • start-placeholder="开始啦" 开始日期输入框的提示占位符

  • end-placeholder="结束啦" 结束日期输入框的提示占位符

format属性 定义日期时间的显示值的格式

• YYYY-MM-DD 年月日

• YYYY-MM-DD HH:mm:ss 年月日 时分秒

value-format属性 定义日期时间提交值的格式

• YYYY-MM-DD 年月日

• YYYY-MM-DD HH:mm:ss 年月日 时分秒

@change="" 事件 监听日期选择,一旦变化立即触发

<template>
  <h1>日期时间选择器组件</h1>
  <el-date-picker
    type="date"
    v-model="rq"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    @change="console.log(rq)"
  ></el-date-picker>
  <br>
  <el-date-picker
      type="datetimerange"
      v-model="times"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      start-placeholder="开始啦"
      end-placeholder="结束啦"
      range-separator="至"
      @change="f"
  ></el-date-picker>
</template>

<script setup>
import {ref} from "vue";

const rq = ref('');
const times = ref([]);
const f = ()=>{
  console.log(times.value);
  console.log(times.value[0]);
  console.log(times.value[1]);
}
</script>

<style scoped>

</style>

1. 员工列表练习 YView.vue

<template>
  <h1>员工列表综合练习</h1>
  <el-form style="width: 600px;margin: 0 auto;">
    <el-form-item label="姓名">
      <el-input v-model="emp.name" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="工资">
      <el-input v-model="emp.salary" placeholder="请输入工资"></el-input>
    </el-form-item>
    <el-form-item label="岗位">
      <el-input v-model="emp.job" placeholder="请输入岗位"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="add()">点我提交</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="arr" style="width: 600px;margin: 0 auto;">
    <el-table-column type="index" label="编号" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="salary" label="工资"></el-table-column>
    <el-table-column prop="job" label="岗位"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";

const emp = ref({name:'',salary:'',job:''});
//定义数组用来保存员工数据
const arr = ref([]);
const add = () => {
  arr.value.push(emp.value);
}
const del = (index,emp)=>{
  if(confirm('确认要删除'+emp.name+'吗?')){
    arr.value.splice(index,1);
  }
}
</script>

<style scoped>

</style>

1. 页面综合练习 ZView.vue

<!--商品列表首页综合练习-->
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- 3.编写顶部导航栏  -->
        <el-menu mode="horizontal" background-color="#0aa1ed" text-color="#fff"
        active-text-color="#ff0" default-active="3">
          <el-menu-item index="1">精彩活动</el-menu-item>
          <el-menu-item index="2">精品女装</el-menu-item>
          <el-menu-item index="3">品牌男装</el-menu-item>
          <el-menu-item index="4">母婴产品</el-menu-item>
          <el-menu-item index="5">数码科技</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <!--4.轮播图区域 高度:240px-->
        <el-carousel style="height: 240px;">
          <el-carousel-item v-for="url in bannerArr">
            <img :src="url" style="width: 100%;height: 100%;">
          </el-carousel-item>
        </el-carousel>
        <!-- 5.商品列表 :gutter="10" -->
        <el-row :gutter="10">
          <el-col :span="6" v-for="p in productArr" style="margin: 10px 0;">
            <el-card style="padding-bottom: 20px;">
              <img :src="p.url" style="width:100%;height: 100%;">
              <p>{{p.title}}</p>
              <div>
                <span style="float: left;color: red;">¥{{p.price}} <s>{{p.oldPrice}}</s></span>
                <span style="float: right;">销量:{{p.saleCount}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer
          style="background-color: #282c30;color:#666;height: 200px;padding-top:40px;">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";
//1.准备轮播图数组
const bannerArr = ref(["/imgs/banner3.jpg", "/imgs/banner4.jpg", "/imgs/banner5.jpg"]);
//2.准备商品对象数组
const productArr = ref([
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233, oldPrice: 598, url: "/imgs/b.jpg", saleCount: 2342},
  {title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季", price: 233, oldPrice: 598, url: "/imgs/c.jpg", saleCount: 2342},
  {title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚", price: 233, oldPrice: 598, url: "/imgs/d.jpg", saleCount: 2342},
  {title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花", price: 233, oldPrice: 598, url: "/imgs/e.jpg", saleCount: 2342},
  {title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领", price: 233, oldPrice: 598, url: "/imgs/f.jpg", saleCount: 2342},
  {title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦", price: 233, oldPrice: 598, url: "/imgs/g.jpg", saleCount: 2342},
  {title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
  {title: "imone2021秋款黑色小西装外套女韩版学生宽松学", price: 233, oldPrice: 598, url: "/imgs/i.jpg", saleCount: 2342},
  {title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫", price: 233, oldPrice: 598, url: "/imgs/j.jpg", saleCount: 2342},
  {title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修", price: 233, oldPrice: 598, url: "/imgs/k.jpg", saleCount: 2342},
  {title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色", price: 233, oldPrice: 598, url: "/imgs/l.jpg", saleCount: 2342}]);
</script>

<style scoped>
p {
  white-space: nowrap; /*强制文本不换行*/
  overflow: hidden; /*溢出隐藏*/
  text-overflow: ellipsis; /*超出去的文本替换成省略号*/
}
</style>