随笔分类 -  Vue

elementUI表格无数据文本居中
摘要：// el-table 空状态文本居中 :deep(.el-table__empty-block) { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 阅读全文
posted @ 2026-01-13 14:54 SimoonJia 阅读(3) 评论(0) 推荐(0)
element表格空状态不居中问题
摘要：原因： 空状态dom在组件库内部通过js动态获取表格设置的高度（height='300px'），自适应时会导致空数据文字跳动， 如果想要规避自适应时的跳动，则需要将表格高度属性设置到style中，避免js计算，但此时空状态无法动态获取到表格的高度 使用position：absolute避免js设置影 阅读全文
posted @ 2026-01-09 17:23 SimoonJia 阅读(10) 评论(0) 推荐(0)
scss样式穿透elementUI
摘要：修改子组件样式也要加 :deep() 告诉 Vue "穿透"样式作用域，影响子组件的内部元素 不需要使用 deep 是因为 .page-tab-box 和其子元素都处在当前组件的作用域内，Vue的scoped样式机制已经确保了样式只作用于当前组件，不会影响到其他组件。只有在需要穿透到子组件内部或修改 阅读全文
posted @ 2026-01-09 11:07 SimoonJia 阅读(7) 评论(0) 推荐(0)
vue祖先与孙子跨级别传递方法（祖先调用孙子方法、中间层调用）-----provide、inject
摘要：单变量存储多个方法 // injectionKeys.js // injectionKeys.js export const DataIntegrationGrandApiKey = Symbol('DataIntegrationGrandApi'); 祖先组件（API 管理者） ✔ 一个 prov 阅读全文
posted @ 2026-01-06 18:15 SimoonJia 阅读(7) 评论(0) 推荐(0)
#suffix 插槽
摘要：这是 唯一优雅、可控、推荐的方式来修改组件库图标 替换组件的:suffix-icon="Search"属性 <el-input v-model="keyword"> <template #suffix> <el-icon @click="onSearch"> <Search /> </el-icon 阅读全文
posted @ 2026-01-05 18:48 SimoonJia 阅读(9) 评论(0) 推荐(0)
Vue 3 父子组件传参方式总览
摘要：🌟 Vue 3 父子组件传参方式总览 1️⃣ Props：父传子 作用 父组件通过 props 向子组件传递数据。 子组件接收后默认 只读，不能直接修改。 支持 静态值、动态值、对象/数组、类型校验、默认值。 子组件写法 // 数组形式 const props = defineProps(['na 阅读全文
posted @ 2025-12-24 10:55 SimoonJia 阅读(47) 评论(0) 推荐(0)
vue2x添加一个元素拖拽功能
摘要：拖拽元素绑定： <div class="add-twin-wrap-container"> <div class="add-twin-wrap" @click.stop> <p class="title" @mousedown="onDragStart"> 添加场景类型实例 <span class= 阅读全文
posted @ 2025-10-29 12:01 SimoonJia 阅读(6) 评论(0) 推荐(0)
vue（穿透闭包/利用闭包）的几种方式
摘要：闭包 let count = 0 setInterval(() => { console.log(count) // ❌ 总是拿到旧值（如果 count 被闭包锁死） }, 1000) ✅ 解决思路 核心思想就是：不要让闭包“锁死”旧的变量引用，而是通过全局/引用对象来拿“实时的”值。 方案 1：用 阅读全文
posted @ 2025-09-10 19:38 SimoonJia 阅读(32) 评论(0) 推荐(0)