当前位置：首页 > news >正文

style scoped作用域

news 来源：原创 2025/6/5 8:58:00

穿透scoped作用域使用:deep(.splitpanes__splitter)的方式
有可能使用了:deep也会无法生效。需要用到!important来解决。

scoped作用范围。只用于当前组件模板内的元素。因为此处要改变的样式是第三方组件的样式，所以在有scoped时会失效，去掉就可以，或者加上:deep
在这里插入图片描述

<template><div class="app-container"><el-container ><!-- Main Container with SplitPanels --><el-main ><splitpanes :gap="40"><!-- 左侧面板 --><pane :size="25" min-size="10px" resizable><el-form ><el-form-item label="患者姓名"><!-- 查询输入框 --><el-input v-model="searchQuery" style="width: 240px" placeholder="请输入患者姓名" clearable/><el-button type="primary" icon="el-icon-search"  size="mini">搜索</el-button></el-form-item></el-form><!-- 表格区域 --><el-table :data="paginatedList" border style="width: 100%"><el-table-column prop="id" label="ID" width="80"></el-table-column><el-table-column prop="title" label="项目名称"></el-table-column><el-table-column prop="title" label="项目名称"></el-table-column><el-table-column prop="title" label="项目名称"></el-table-column></el-table></pane><!-- 右侧主内容 --><pane resizable><div ><h3>主内容区域</h3><p>这里是主要内容部分。</p></div></pane></splitpanes></el-main></el-container><!-- Footer --></div>
</template><script>
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css'export default {components: {Splitpanes,Pane},data() {return {searchForm: {name: ''// ...},searchQuery: '',searchName: '',items: [{ id: 1, title: '项目A' },{ id: 2, title: '项目B' },{ id: 3, title: '项目C' },// 更多数据...],pageSize: 10,currentPage: 1};},computed: {paginatedList() {const start = (this.currentPage - 1) * this.pageSize;return this.items.slice(start, start + this.pageSize);}}
};
</script>
<style scoped>
:deep(.splitpanes__splitter) {width: 20px; /* 设置间距为 40px */
}
</style>