1、input设置radio类型时,不显示圆圈,只需要设置
style="display:none"
2、使用El-Table时,如果想要表单靠左侧
- 只需在
<el-table-column>
中设置fixed="left" width="50"
即可进行更改。
3、position:absolute; 绝对定位,如果要在按钮右下角设置打钩图标,需要用到绝对定位,如下设置:
.gouxuan {
position: absolute;
font-size: 30px;
right: 0;
bottom: 0;
color: #03aaed;
}
- 会看到显示的是相对于浏览器来定位的,如果要在按钮空间能定位,需要在按钮最外层有position属性设置才行,所以这里加上默认设置
position:relative
即可。
4、当鼠标指针在按钮区域时,指针变成小手样式,增加点击体验
- 只需在CSS样式中添加
cursor: pointer
。
5、input标签type为number时怎么去除加减按钮。
6、父组件与子组件之间传值:since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "currentIndex"。
7、段落中不进行换行
white-space: nowrap
8、分页模块,位置设置靠右,只需要设置text-align: right
即可。
<div class="pagination-wrapper">
<div class="pagination">
<el-pagination :page-sizes="[10, 20, 30, 40,50]" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="paginationPageSize" layout="total, sizes, prev, pager, next, jumper" :total="getTableData.length">
</el-pagination>
</div>
</div>
.pagination-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-top: 16px;
width: 100%;
.pagination {
margin-right: 12px;
text-align: right;
}
}Ï
10、文字下划线
border-bottom: 1px solid #1ba261;
// 下划线距离文字的间隔
padding-bottom: 1px;
11、当使用v-if
时,有时会出现视图无法及时响应,所以需要使用:
this.$nextTick(() => {})
12、Vue中,当移动鼠标至文字位置时,文字颜色会改变,鼠标移出时,文字颜色变回之前默认的颜色。
<span class="allow-edit-text" :style="{color:(editTextColor?'#409eff':'#3e3a39')}" @click="allowEditClick" @mouseover="onEditMouseover" @mouseout="onEditMouseout">编辑</span>
...
methods: {
onEditMouseover () {
this.editTextColor = true
},
onEditMouseout () {
this.editTextColor = false
}
}
13、修改elememt-ui中<el-from-item>中label的文本的颜色
<el-form-item>
<span slot="label" class="label-text">用户名</span>
<el-input></el-input>
</el-form-item>