style scoped作用域

穿透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>