day9_elementPlus2

通往曙光的路上2025-10-14 10:09

day9_elementPlus2

1.data(数组)组件

1.1table 表格
1.1.1table基本用法

通过自动遍历数组 展示数据

  1. :data="tableData" 绑定数组

  2. <el-table-column prop="name" label="名称"> </el-table-column> 指定列

复制代码 
<script setup>
import { ref } from 'vue' 
​
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
​
</script>
​
<template>
  <el-table :data="tableData" style="width: 100%">
       <el-table-column prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>
​
<style scoped>
​
</style>
1.1.2table样式

隔行变色 边框

固定表头: table上加height属性 固定高度

<el-table :data="tableData" border height="350" stripe style="width: 100%">

固定列:在column上 加fixed属性

注意:如果要固定列效果 不能使用列自适应宽度 需要指定宽度

左固定

<el-table-column fixed prop="date" label="日期" width="180"> </el-table-column>

右固定

<el-table-column fixed="right" prop="address" label="地址" width="280"> </el-table-column>

复制代码 
<script setup>
import { ref } from 'vue' 
​
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
​
</script>
​
<template>
  <el-table :data="tableData" border height="350" stripe  style="width: 100%">
       <el-table-column fixed prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column fixed  prop="name" label="名称" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column fixed="right" prop="address" label="地址" width="280"> </el-table-column>
​
  </el-table>
</template>
​
<style scoped>
​
</style>
1.1.3table选择
1.3.1单选

注意:

1.highlight-current-row 选中样式

2.增加 @current-change="handleCurrentChange" 可以选中被选到的数据

复制代码 
const handleCurrentChange = (val)=>{
    console.log("选中了一行",val);
    currentRow = val
}

3.如果要跨函数使用 注意加中间变量

复制代码 
let currentRow ={}
​
const handleCurrentChange = (val)=>{
    console.log("选中了一行",val);
    currentRow = val
}
​
const myDelete = ()=>{
    console.log("删除");
    console.log(currentRow);
    
}
复制代码 
<script setup>
import { ref } from 'vue' 
​
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
​
let currentRow ={}
​
const handleCurrentChange = (val)=>{
    console.log("选中了一行",val);
    currentRow = val
}
​
const myDelete = ()=>{
    console.log("删除");
    console.log(currentRow);
    
}
​
</script>
​
<template>
  <el-table :data="tableData" highlight-current-row border height="350" @current-change="handleCurrentChange"  style="width: 100%">
       <el-table-column fixed prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column fixed  prop="name" label="名称" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column fixed="right" prop="address" label="地址" width="280"> </el-table-column>
​
  </el-table>
  <button @click="myDelete" >删除</button>
</template>
​
<style scoped>
​
</style>
1.3.2多选

1.增加多选框

<el-table-column type="selection" width="55" />

2.操作选中的数据

通过table对象操作

复制代码 
table上加ref属性
<el-table ref="tableRef" :data="tableData"  border height="350"   style="width: 100%">
    
获取table的Ref对象    
const tableRef = ref()
​
​
通过table对象操作数据
const myDelete = ()=>{
    console.log("删除");
    //console.log(currentRow);
    //读取table里的选中行
    console.log(tableRef.value.getSelectionRows());
     
}
复制代码 
<script setup>
import { ref } from 'vue' 
​
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  }
]
​
let currentRow ={}
​
const handleCurrentChange = (val)=>{
    console.log("选中了一行",val);
    currentRow = val
}
​
const tableRef = ref()
​
const myDelete = ()=>{
    console.log("删除");
    //console.log(currentRow);
    //读取table里的选中行
    console.log(tableRef.value.getSelectionRows());
     
}
​
</script>
​
<template>
  <!-- <el-table :data="tableData" highlight-current-row border height="350" @current-change="handleCurrentChange"  style="width: 100%">
       <el-table-column fixed prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column fixed  prop="name" label="名称" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column fixed="right" prop="address" label="地址" width="280"> </el-table-column>
​
  </el-table> -->
    <el-table ref="tableRef" :data="tableData"  border height="350"   style="width: 100%">
       <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="date" label="日期" width="180"> </el-table-column> 
        <el-table-column fixed  prop="name" label="名称" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
​
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column fixed="right" prop="address" label="地址" width="280"> </el-table-column>
​
  </el-table>
  <button @click="myDelete" >删除</button>
</template>
​
<style scoped>
​
</style>
1.3.3自定义列数据
复制代码 
  table的数据插槽用法
  1 配合自定义按钮 获取当前行数据
  2 让table中的数据提高体验 
    1加入动态数据
    2通过v-if 切换不同的状态显示
    3通过函数处理复杂数据逻辑
复制代码 
<script setup>
import { ref } from 'vue' 
import { Finished, Phone } from '@element-plus/icons-vue'
//1男 2女
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom1',
    gender: '1',
    phone: '12345678901',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    gender: '1',
    phone: '3345345',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    gender: '2',
    phone: '234566234',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    gender: '1',
    phone: '656544444',
    address: 'No. 189, Grove St, Los Angeles',
  }
]


const myEdit = (currentRow) => {
  console.log('点击了修改按钮',currentRow)
}


const transPhone = (phone) => {
  let phoneEnd = phone.substr(phone.length-4) 
  return '******'+phoneEnd
}

</script>

<template>
  <!-- 
  table的数据插槽用法
  1 配合自定义按钮 获取当前行数据
  2 让table中的数据提高体验 
    1加入动态数据
    2通过v-if 切换不同的状态显示
    3通过函数处理复杂数据逻辑

  -->

    <el-table ref="tableRef" :data="tableData"  border height="350"   style="width: 100%">
       <el-table-column type="selection" width="55" />
        <el-table-column fixed  label="日期" width="180">
          <template #default="scope">
            <el-icon><Finished /></el-icon> {{ scope.row.date }} 
          </template>
        </el-table-column> 
        <el-table-column fixed  prop="name" label="名称" width="180"> </el-table-column>
        <el-table-column prop="gender" label="性别" width="280">
              <template #default="scope">
                <el-text v-if="scope.row.gender=='1'" type="success">男</el-text>
                <el-text v-else type="danger">女</el-text>
              </template>  
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="280">
            <template #default="scope">
              <el-icon><Phone /></el-icon> {{ transPhone(scope.row.phone)  }}
            </template>  
        </el-table-column>
        <el-table-column prop="address" label="地址" width="280"> </el-table-column>
        <el-table-column  label="操作" width="280"> 
          <!-- table 的数据插槽 -->
          <template #default="scope">
            <el-button @click="myEdit(scope.row)">修改</el-button>
          </template>
          <!-- <el-button @click="myEdit">修改</el-button> -->


        </el-table-column>

  </el-table>

</template>

<style scoped>

</style>
1.2分页组件

独立的组件 传入 total page pageSize 可以自动改变分页组件的数据

注意:

复制代码 
1分页组件 通常搭配其他组件使用 搭配table
	
const tableData = reactive({
    tableList:[],
    // 分页信息
    //后端查完数据 给分页参数赋值 页面参数自动变化
    pageInfo:{
        total:77,
        pageSize:10,
        page:3
    }
})

2分页组件的关键参数
	 <el-pagination
      v-model:current-page="tableData.pageInfo.page"    当前页
      v-model:page-size="tableData.pageInfo.pageSize"  每页多少条
      :total="tableData.pageInfo.total"                总记录数
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

 3分页组件的函数
   从后端取最新的数据 到前端显示
   current-change 当前页发生改变
   size-change    每页多少条发生改变
复制代码 
<script setup>
import { ref,reactive } from 'vue' 

const tableData = reactive({
    tableList:[],
    // 分页信息
    //后端查完数据 给分页参数赋值 页面参数自动变化
    pageInfo:{
        total:77,
        pageSize:10,
        page:3
    }
})

const handleCurrentChange = (page)=>{
    tableData.pageInfo.page = page
    console.log("页码切换了",tableData.pageInfo);
}

const handleSizeChange = (pageSize)=>{
    tableData.pageInfo.pageSize = pageSize
    console.log("每页多少条切换了",tableData.pageInfo);
}

</script>




<template>
<!-- 
    1.控制分页组件使用哪些功能
    layout="total,       sizes, prev, pager, next, jumper"
            总记录数 每页多少条  上一页 页码    下一页  跳页
    2.控制每页多少跳下拉列表的值
    :page-sizes="[100, 200, 300, 400]"
      
    3.页码组件主要切换参数
        :total="400"   总共多少跳
        v-model:page-size="pageSize4"  每页实际多少条
        v-model:current-page="currentPage4" 当前页
-->

 <el-pagination
      v-model:current-page="tableData.pageInfo.page"
      v-model:page-size="tableData.pageInfo.pageSize"
      :total="tableData.pageInfo.total"
      :page-sizes="[10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <!--       @size-change="handleSizeChange"
       -->
</template>

<style scoped>

</style>
1.3tree树形组件

注意:

复制代码 
1 tree主要用来展示 父子关系的数据
2 可以搭配checkbox 做选择效果

3 读取 设置 清空
  	const showData = ()=>{
        //如果只要子数据 就用getCheckedKeys(true) 否则全选时会带父数据
        console.log(treeRef.value.getCheckedKeys(true));
        //console.log(treeRef.value.getCheckedNodes());
    }
    const setData = ()=>{
        treeRef.value.setCheckedKeys(['710000','659006']);
    }
    const resetData = ()=>{
        treeRef.value.setCheckedKeys([]);
    }
复制代码 
<script setup>
import { ref } from 'vue' 
import areaData from '@/myjs/myData.js'

console.log(areaData);

const treeData = ref([])

treeData.value = areaData


const defaultProps = {
  children: 'subArea',
  label: 'name',
}

const treeRef = ref()

const showData = ()=>{
    //如果只要子数据 就用getCheckedKeys(true) 否则全选时会带父数据
    console.log(treeRef.value.getCheckedKeys(true));
    //console.log(treeRef.value.getCheckedNodes());
}
const setData = ()=>{
    treeRef.value.setCheckedKeys(['710000','659006']);
}
const resetData = ()=>{
    treeRef.value.setCheckedKeys([]);
}

</script>

<template>
    <el-button @click="showData">查看选中项</el-button>
    <el-button @click="setData">设置选中项</el-button>
    <el-button @click="resetData">清空选中项</el-button>
     <el-tree
        ref="treeRef"
        style="max-width: 600px"
        show-checkbox
        :data="treeData"
        default-expand-all
        node-key="code"
        :props="defaultProps"
    />

</template>

<style scoped>

</style>
1.4其他数据组件(了解)

2菜单组件

2.1导航菜单

注意:

  1. 菜单需要做成动态菜单 (由后端查询数据 前端只负责展示 菜单需要带父子关系)

2.图标如果要配合菜单动态生成 需要使用<component :is="menu.icon" /> 动态生成

如果要正常显示 需要把图标 全局注册给vue对象 挂载到vue的组件中 才能识别出图标显示

3.v-for 可以嵌套使用 如果子数据中有集合 可以多层嵌套

复制代码 
<script setup>
import { ref } from 'vue' 
import {
  Document,
  Edit,
  Location,
  Setting,
  Check,
  Message,
  UploadFilled
} from '@element-plus/icons-vue'


const menuList = [
  {
    mid: '1',
    menuname: '用户管理',
    icon: 'Location',
    subMenu: [
      {
        mid: '1-1',
        menuname: '用户添加',
        icon: 'Setting',
      },
      {
        mid: '1-2',
        menuname: '用户查找',
        icon: 'Edit',
      }
    ]
  },
  {
    mid: '2',
    menuname: '财务2管理',
    icon: 'Check',
    subMenu: [
      {
        mid: '2-1',
        menuname: '财务对账',
        icon: 'Message',
      },
      {
        mid: '2-2',
        menuname: '财务信息',
        icon: 'UploadFilled',
      }
    ]
  }
]

console.log(menuList);


</script>

<template>

    <el-row>
        <el-col :span="8">
            <el-menu 
                active-text-color="#ffd04b" 
                background-color="#545c64" 
                text-color="#fff"
                 >
                 <!-- el-sub-menu 可展开菜单 -->
                <el-sub-menu v-for="menu in menuList" :index="menu.mid">
                    <template #title>
                        <el-icon>
                            <!-- 根据字符串生成标签  -->
                            <!-- //<location /> -->
                            <component :is="menu.icon" />
                        </el-icon>
                        <span>{{menu.menuname}}</span>
                    </template>
                    <el-menu-item v-for="subM in menu.subMenu" :index="subM.mid">
                        <el-icon>
                            <component :is="subM.icon" />
                        </el-icon>
                        <span>{{ subM.menuname }}</span>
                    </el-menu-item>

                </el-sub-menu>
                
            </el-menu>



        </el-col>

    </el-row>


    <!-- 菜单需要做成动态菜单 
         效果:由后端查询出来 前端负责展示 
         不同权限的人 看到菜单不同
    -->

    <!-- <component is="button" value="jack">jack</component> -->

</template>

<style scoped></style>
2.2菜单跳转

菜单可以启动路由模式(需要安装router插件)

复制代码 
<script setup>
import { ref } from 'vue' 
import router from '@/router'
import {
  Document,
  Edit,
  Location,
  Setting,
  Check,
  Message,
  UploadFilled
} from '@element-plus/icons-vue'



// const myHref = (url)=>{ 
//     router.push(url)
// }

const menuList = [
  {
    mid: '1',
    menuname: '用户管理',
    icon: 'Location',
    subMenu: [
      {
        mid: '1-1',
        menuname: '用户添加',
        icon: 'Setting',
        url:'/1button'
      },
      {
        mid: '1-2',
        menuname: '用户查找',
        icon: 'Edit',
        url:'/2button'
      }
    ]
  },
  {
    mid: '2',
    menuname: '财务2管理',
    icon: 'Check',
    subMenu: [
      {
        mid: '2-1',
        menuname: '财务对账',
        icon: 'Message',
        url:'/3button'
      },
      {
        mid: '2-2',
        menuname: '财务信息',
        icon: 'UploadFilled',
        url:'/4button'
      }
    ]
  }
]

console.log(menuList);


</script>

<template>

    <el-row>
        <el-col :span="8">
            <el-menu 
                active-text-color="#ffd04b" 
                background-color="#545c64" 
                text-color="#fff"
                router
                 >
                 <!-- el-sub-menu 可展开菜单 -->
                <el-sub-menu v-for="menu in menuList" :index="menu.mid">
                    <template #title>
                        <el-icon>
                            <!-- 根据字符串生成标签  -->
                            <!-- //<location /> -->
                            <component :is="menu.icon" />
                        </el-icon>
                        <span>{{menu.menuname}}</span>
                    </template>
                    <el-menu-item v-for="subM in menu.subMenu" :index="subM.url">
                        <el-icon>
                            <component :is="subM.icon" />
                        </el-icon>
                        <span>{{ subM.menuname }}</span>
                    </el-menu-item>

                </el-sub-menu>
                
            </el-menu>



        </el-col>

    </el-row>


    <!-- 菜单需要做成动态菜单 
         效果:由后端查询出来 前端负责展示 
         不同权限的人 看到菜单不同
    -->

    <!-- <component is="button" value="jack">jack</component> -->

</template>

<style scoped></style>

3反馈组件

3.1消息提示类

有预设的界面和结构

调用比较简单

  1. 引入组件 import { ElMessage, ElMessageBox } from 'element-plus'

  2. 参考文档 设置组件要使用的参数

    有固定的格式 (限制比较多)

复制代码 
<script setup>
import { ref } from 'vue' 
import { ElMessage, ElMessageBox } from 'element-plus'

const openMessage = () => {
//   ElMessage({
//     message: '恭喜你，这是一条成功消息',
//     type: 'error',
//   })
//简化写法  success 绿色  info 灰色 warning 黄色  error 红色
ElMessage.success('恭喜你，这是一条成功消息')
}

const openMessageBox = ()=>{
    ElMessageBox.confirm(
    '提示信息.....',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
//  promise对象 then catch 
    .then(() => {
        //确定之后 干什么
        console.log("确定了");
        
    })
    .catch(() => {
        //取消之后 干什么
        console.log("取消了");
    })
}


</script>

<template>
 <el-button @click="openMessage">成功</el-button>
 <el-button @click="openMessageBox">对话框</el-button>
</template>

<style scoped>

</style>
3.2对话框类

需要自己编辑弹出框样式 仅提供弹出界面 使用起来更自由 可以与其他功能组件组合使用

对话框 抽屉 用法类似

1.确定触发方式 (例子中是点击按钮 可以配合其他事件触发)

2.需要配置bol值 控制界面的打开/关闭

复制代码 
const dialogVisible = ref(false)
const drawerVisible = ref(false)

3.需要手动编辑弹出框界面 (可以与其他功能组件组合界面)

复制代码 
对话框   
<el-dialog
        v-model="dialogVisible"
        title="对话框"
        width="500"
       
    >
     空的对话框....



     <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>



抽屉
    <el-drawer
    v-model="drawerVisible"
    title="这是抽屉"
    direction="btt" 
    size="70%"
  >
    空抽屉 啥都能放
      <el-button plain @click="openInnerDrawer">
        打开子抽屉
      </el-button>
          <el-drawer
                v-model="drawerInnerVisible"
                title="这是子抽屉"
                direction="btt" 
                size="50%"
            >
                内部抽屉

            </el-drawer>
  </el-drawer>
复制代码 
<script setup>
import { ref } from 'vue' 

const openDialog = ()=>{
    dialogVisible.value = true
}

const openDrawer = ()=>{
    drawerVisible.value = true
}

const openInnerDrawer = ()=>{
    drawerInnerVisible.value = true
}

const dialogVisible = ref(false)
const drawerVisible = ref(false)

const drawerInnerVisible = ref(false)

</script>

<template>

    <!-- 对话框 是一个空的悬浮框 (模态框)
         可以搭配其他的组件 构成 一个完整的对话框
         用法:组合页面 减少页面数量 
     
    -->
    
    <el-button plain @click="openDialog">
        Click to open the Dialog
    </el-button>
     <el-button plain @click="openDrawer">
        打开抽屉
    </el-button>




      <el-dialog
        v-model="dialogVisible"
        title="对话框"
        width="500"
       
    >
     空的对话框....



     <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


    <el-drawer
    v-model="drawerVisible"
    title="这是抽屉"
    direction="btt" 
    size="70%"
  >
    空抽屉 啥都能放
      <el-button plain @click="openInnerDrawer">
        打开子抽屉
      </el-button>
          <el-drawer
                v-model="drawerInnerVisible"
                title="这是子抽屉"
                direction="btt" 
                size="50%"
            >
                内部抽屉

            </el-drawer>
  </el-drawer>


</template>

<style scoped>

</style>

作用:

组合界面使用 可以把有数据关联的功能 做到一个页面中 减少页面跳转数量

相关推荐
冴羽20 小时前
今日苹果 App Store 前端源码泄露，赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁20 小时前
Angular【router路由】
前端·javascript·angular.js
时间的情敌20 小时前
Vite 大型项目优化方案
vue.js
西洼工作室21 小时前
高效管理搜索历史：Vue持久化实践
前端·javascript·vue.js
樱花开了几轉21 小时前
element ui下拉框踩坑
开发语言·javascript·ui
故事不长丨21 小时前
【Java SpringBoot+Vue 实现视频文件上传与存储】
java·javascript·spring boot·vscode·后端·vue·intellij-idea
Jeffrey__Lin1 天前
解决Grid布局下el-table自适应缩小失败的问题
vue.js·elementui·html
时间的情敌1 天前
Vue3的异步DOM更新：nextTick的正确使用方法
前端·javascript·vue.js
咖啡の猫1 天前
vue 项目中常用的 2 个 Ajax 库
vue.js·ajax·okhttp
一个假的前端男1 天前
uniapp vue2 三端瀑布流
前端·javascript·uni-app
热门推荐
01GitHub 镜像站点02综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件03UV安装并设置国内源04npm使用国内淘宝镜像的方法05Linux下V2Ray安装配置指南06《大数据技术原理与应用》实验报告三 熟悉HBase常用操作07BongoCat - 跨平台键盘猫动画工具08NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南09GitLab 零基础入门指南：从安装到项目管理全流程10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）