el-card - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

给 el-card 添加折叠功能

出发点虽然 Element 也有 el-collapse 组件，但是当我只想写一个折叠面板时，它的写法就略显繁琐了，el-card 组件的样式也更符合我的需求，所以我就想着给 el-card 添加折叠功能...https://lruihao.github.io/vue-el-demo/#/card-collapse 2 实现过程一开始想着使用 Vue 的自定义指令功能来实现，但是动手之前还是习惯性地先看 el-card...，如下所示： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 el-card...3 实现方式通过继承 el-card 组件来实现，这样就不用改 el-card 的源码了，也不用担心升级 Element 时会被覆盖掉。...继承也很简单，这样简单几行就完整继承了原来 el-card 的所有功能了： 1 2 3 4 5 6 7 import { Card } from 'element-ui' export

1.6K2 0

vue中watch监听对象的变化_远程监听器用法

示例： el-card class="box-card">el-card> export default { data() { return { name: '123' }; } }; </script...【第一种写法】 el-card class="box-card">el-card> export default { data() { return { name: '123' }; }, watch... el-card class="box-card">el-card

3.8K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

Vue前台可以生成二维码了，您还在用后台生成吗？

text-align: right;"> 字符数量:{{this.QrCodeWordsNumberText}} el-card...> el-card :body-style="{ padding: '0px' }">... el-card> ...> el-card :body-style="{ padding: '0px' }" >... el-card> </div

1.1K1 0

Vue2——监听页面滚动实现菜单和页面对应

="hover" header="营销目标与场景" > el-card> <!...="hover" header="投放内容与目标" > el-card> <!...hover" header="投放版位" > el-card> <!..."hover" header="排期与预算" > el-card> <!...hover" header="搜索快投" > el-card> <!

4041 0

【学生管理系统】权限管理之角色管理

查询所有角色 1）后端【已有】 2）前端要求：左右分屏 el-card...-- 角色列表 end --> el-card> el-card class="perm-list-card"> ...-- 权限展示 end --> el-card> el-card> <el-col :span="8" style="padding-left: 10px;

2.2K4 0

Vue3入门笔记八----实现首页的展示内容

el-row class="home" :gutter="20"> el-card...上次登录时间： 2022-10-10 上次登录地点：上海 el-card...> el-card shadow="hover" style="margin-top:20px;"> el-card...{ display: flex; flex-wrap: wrap; justify-content: space-between; .el-card

3611 0

如何使用Vue3实现登录注册页面多种布局的6套源码案例, 完整vue代码，直接复制,免费领取

Login.vue: el-card class="login-card"> 登录登录 el-card...Login.vue: el-card class="login-card"> 登录 el-card class="login-card"> 注册</h2...Login.vue: el-card class

3.5K1 1

Vue写一些试题样式

-- 左侧 --> el-card class="type_list">

el-card class="qu_list"> .../> 这里是试题解析部分 el-card...-- 右侧试卷信息 --> el-card class="paper_base"> <p class

8862 0

【UI】 elementui card 禁用效果

-- el-card有divcard类名就有禁用效果 --> el-card class="box-card divcard" @click.native="cardFn..." class="text item"> {{ "列表内容 " + o }} el-card

971 0

element-ui 表格hook 及相关组件

onCurrentChange, ...toRefs(state) } } 搜索条 el-card...padding-bottom: 2px"> el-card......toRefs(allState) } } } 分页 el-card...$slots['table-top-bar'] return ( el-card body-style='padding: 0' shadow='hover...tableConf.props } > { tableColumns } el-card

1K1 0

基于SpringBoot打造在线教育系统（6）-- 二级分类模块UI篇

el-card class="box-card... el-card> 开整css： /** 卡片相关 * */ .box-card { cursor:pointer...position: absolute; right: 10px; bottom:8px; color:#666; font-size:14px; } 这个span直接放到el-card...margin:30px 16px;"> el-card... 1 el-card> <

6041 0

用例新增、编辑页面

remove" icon="Delete" > 删除用例 el-card... el-card...prepend>接口地址: el-card...el-tab-pane> 数据库校验 el-card...el-tab-pane> RequestInfo el-card

6414 0

Vue3 列表渲染性能优化实战：基于 CodeBuddy 的虚拟列表方案

Thrashing 项目技术栈为 Vue3 + Vite + Element Plus，原实现采用简单的 v-for 渲染： el-card...-- 数据内容 --> el-card> 二、CodeBuddy 性能诊断与方案生成 1....输入提示： "优化 Vue3 列表渲染性能，当前1000条数据滚动卡顿，项目使用 Vue3 + Vite + Element Plus" AI 快速定位两大核心问题： DOM 节点爆炸：1000个 el-card...scroller" :items="products" :item-size="180" key-field="id" v-slot="{ item }" > el-card...-- 优化后的数据内容 --> el-card> import { RecycleScroller

4141 0

(简易)测试数据构造平台:31 - 登录页面

效果如下：然后我们去弄个卡片条横在中间：之后的内容，输入框，登录按钮，都在这个el-card中完成即可：代码复制如下： el-card style="width: 100%; display... 登录 el-card

3031 0

Vue 按条件添加类

Vue 按条件添加类 el-card class="box-card"> el-card

1.4K2 0

vue的 v-for指令报“custom elements in iteration require v-bind:key“错误

el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs" :key="blog.id"> el-card... {{blog.description}} el-card

8491 0

【deepseek用例生成平台-15】核心内容之需求配置页

font-size: small">（需求配置步骤：1.需求分解 2.需求优化 3.人工确认 4.保存结果） el-card...rows="3" placeholder="请输入原始需求后点击右侧开始分解按钮" /> el-card...> el-card class="custom-card"> el-card

1931 0

vue3后台管理系统（模板）

用户登录登录页面代码 el-card class="login_center"> 登录 el-card...数据管理 el-card shadow="never" class="index"> <div...: 100%; max-height: auto; width: 360px; height: 180px; } 组件内使用 el-card...-- 富文本 --> el-card> </template

5.4K2 1

vue创建备忘录

nbsp; 极客李华的项目 el-card...type="primary" v-on:click="toregister" >注册 el-card...="background"> 极客李华的课设 el-card...top: 8%; left: 12%; } #register{ position: absolute; top: 20%; left: 35%; } .el-card... el-card> 截止日期：备忘录内容：<

2310 0

【SpringBoot+Vue】009-搜索栏和添加用户组件、后台实现查询、用户列表渲染

-- 这是用户列表主体部分 --> el-card> 添加用户 el-card...important 提高样式级别 */ .el-card{ box-shadow: 0 1px 1px rgba(0, 8, 10, 0.15) !...-- 这是用户列表主体部分 --> el-card> el-card> <!

4091 0

点击加载更多

热门标签

活动推荐

运营活动

活动名称

广告关闭