热门标签
热门文章
- 1/lib64/libc.so.6: version `GLIBC_2.7' not found 解决方案
- 2ESXI系统引导盘
- 3python语言中with as的用法使用详解_with as函数
- 4Vue 中循环渲染多个相同 echarts 图表,并传入不同的数据_vue里如何给相同的echart图标传进去不同的数据显示在不同元素内
- 5进制概念和IP的换算方法简析_ip进制怎么算技巧
- 6独立开发变现周刊（第105期）：开发一个年收入120万美元的拍照工具
- 7unity动画状态机_unity 动画状态机
- 8无法将类型为“Microsoft.Office.Interop.Excel.ApplicationClass”的COM 对象强制转换为接口类型“Microsoft.Office.Interop.Exc...
- 9帕鲁服务器怎么开，palworld，palserver，steamcmd，内存泄露解决_帕鲁 docker 存档
- 1010 查看及切换目录_man hier命令
当前位置: article > 正文
ElementUI-plus 在项目中常见的问题_element-ui-plus
作者：知新_RL | 2024-02-20 22:36:26
赞
踩
element-ui-plus
table 表格
边框border、斑马线stripe
<el-table :data="tableData" style="width: 100%" stripe border>
- 1
slot 在表格中添加内容
在template中 添加 #default=“scope” ， 在el-table-column中加key=“slot”。
<el-table-column label="操作" align="center" width="100" key="slot">
<template #default="scope">
<div class="slot_list">
<span class="ready_exam">{{scope.row.role_rules}}</span>
</div>
</template>
</el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
修改表头的样式： :header-cell-style
修改表内容的样式： :cell-style=
<el-table :data="tableData" style="width: 100%" stripe border
:header-cell-style="{background:'#f5f7fa',color:'#606266',textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
- 1
- 2
以下是修改表头的背景色、表头文字居中
:header-cell-style="{background:'#f5f7fa',color:'#606266',textAlign: 'center'}"
- 1
以下是表内容文字居中
:cell-style="{ textAlign: 'center' }"
- 1
表格数据排序 :sortable=“true”
<el-table-column label="排序" :sortable="true" prop="sort">
<template #default="scope">
<div class="address_list">
<el-input-number
v-model="scope.row.sort"
:min="1"
:max="10"
@change="handleCountChange(scope.row)" />
</div>
</template>
</el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
设置全局的弹框样式（eg:页面中的根class为container ）
eg:切记不用穿透， 写到App.vue中
.container .el-dialog__header {
background: #f2f2f2 !important;
}
.container .el-dialog__footer {
border-top: 1px solid #e0e0e0;
margin: 0 10px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
这个设置后的头部和下边框
switch 文字开关组件里面显示
<el-switch v-model="value" active-color="#2d8cf0" inactive-color="#aaa" active-value="1" inactive-value="0" :class="{'switch-is-actived': getTaskSubscribeState('row') == '1'}" :value="getTaskSubscribeState('row')"/> //以下JS getTaskSubscribeState(e){ console.log("e",e); }, // 以下css部分 .el-switch { ::v-deep .el-switch__core { &::before { content: '关闭'; color: #fff; position: absolute; // font-size: 14px; transform: scale(0.85); left: 20px; } } &.switch-is-actived { ::v-deep .el-switch__core { &::before { content: '开启'; left: 10px; transform: scale(0.85); } } } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
如下~
data
houseOption: [
{
value: 0,
label: "全部",
},
{
value: 1,
label: "住宅",
},
{
value: 2,
label: "商户",
},
],
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
<el-radio-group v-model="queryInfo.house_type">
<el-radio-button
:label="item.value"
v-for="(item, index) in houseOption"
:key="index"
>{{item.label}}</el-radio-button>
</el-radio-group>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
在编辑弹框中，首次进来switch值没有变化，一直处于关闭状态，
操作: 在active-value 和 inactive-value 加个：即可。
<el-switch v-model="addQueryInfo.data.statics_status" active-color="#169bd5" inactive-color="#aaa"
:active-value="1" :inactive-value="0" @change="switchChange"/>
- 1
- 2
- 3
- 4
- 5
- 6
修改表格背景，文字颜色
/* 表格内背景颜色 */
&::v-deep .el-table th {
background-color: #c4b3ab !important;
color: #1a1aa8 !important;
}
&::v-deep .el-table tr {
background-color: #c4b3ab !important;
color: #1a1aa8 !important;
}
&::v-deep .el-table td {
background-color: #c4b3ab !important;
color: #1a1aa8 !important;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/121051
推荐阅读
- 第一步：引入element-ui的分页器
[详细] -->赞
踩
相关标签
