修改element 组件的样式 el-transfer修改宽度

el-transfer默认宽度是200px
在内容较长的时候,无法展示完全
在这里插入图片描述
需要修改该组件的宽度

处理方法是
采用定位组件的方法,通过组件外层的class或id定位,使用 >>> 进行样式穿透。

在el-transfer 外套一个div class为edit_dev

        <div class="edit_dev">
          <el-transfer
            v-loading="transLoading"
            filterable
            filter-placeholder="搜索"
            v-model="value"
            :data="transData"
            :titles="['未选择', '已选择']">
          </el-transfer>
        </div>

添加样式 注意需要 scoped 没有scoped时会不生效

<style scoped>
   .edit_dev >>> .el-transfer-panel {
     width:350px;
   }
</style>

在这里插入图片描述
效果实现

参考链接
https://www.jianshu.com/p/506fe5057179
在此表示感谢

  • 20
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
修改 element-plus 的 el-date-picker 样式,可以使用以下两种方法: 1. 使用全局样式覆盖默认样式 在全局样式中添加以下代码,即可修改 el-date-picker 的样式: ```css /* 修改日期选择器的宽度 */ .el-date-picker { width: 200px; } /* 修改日期选择器中的日期单元格的背景色 */ .el-date-table td.available:hover, .el-date-table td.current { background-color: #f0f0f0; } ``` 2. 使用自定义主题 element-plus 提供了自定义主题的功能,可以通过修改主题变量来改变组件样式。具体步骤如下: 1. 在项目中创建一个 `element-variables.scss` 文件,并在其中定义需要修改的主题变量,例如: ```scss $--color-primary: #409EFF; $--border-radius-base: 4px; ``` 2. 在 `main.js` 中引入 `element-variables.scss` 文件,并使用 `ElThemeProvider` 组件将应用包裹起来,例如: ```js import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import './element-variables.scss'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 3. 在组件中使用自定义主题,例如: ```html <template> <el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker> </template> <script> export default { data() { return { date: '', pickerOptions: { shortcuts: [{ text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } }] } }; } };</script> <style scoped> /* 修改日期选择器的宽度 */ .el-date-picker { width: 200px; } /* 修改日期选择器中的日期单元格的背景色 */ .el-date-table td.available:hover, .el-date-table td.current { background-color: #f0f0f0; } </style> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值