样式穿透
从浏览器中找到需要改动的组件父class，在CSS文件中通过::v-deep或/deep/进行样式改动
两种方式
- 外层容器 >>> 组件名（在less中使用)
- 外层容器 /deep/ 组件名 (在less中使用)
<style lang='less' scoped>
.box >>> .el-checkbox__inner {
border-radius: 50%;
}
.box {
/deep/ .el-checkbox__inner {
border-radius: 50%;
}
}
</style>
下拉框选项从后台获取并设置第一个默认选中
<div class="selectBox">
<span>品牌</span>
<el-select v-model="businessPreSelect" placeholder="请选择" size="mini" class="select" @change='change'>
<el-option
v-for="item in businessSelect"
:key="item.brandId"
:label="item.brandName"
:value="item.brandId">
</el-option>
</el-select>
</div>
data(){
return{
businessPreSelect: '',
businessSelect: []
}
}
methods:{
//初始化品牌下拉
initBussinessSel(){
getHeziSalesPlanParams().then(res => {
this.businessSelect = res.data //获取所有选项，包含brandId和brandName的对象数组
if(this.businessSelect != null){
this.businessPreSelect = this.businessSelect[0].brandId // 预选中第一项
}
}).catch(error => {
console.log(error)
reject(error)
})
}
}
el-upload模拟点击
<button @click="handleUpload">上传文件</button>
<el-upload
v-show="false"
class="upload-resource"
multiple
action=""
:http-request="clickUploadFile"
ref="upload"
:on-success="uploadSuccess"
>
上传本地文件
</el-upload>
<script>
export default {
methods: {
// 模拟点击
handleUpload() {
document.querySelector(".upload-resource .el-upload").click()
},
// 上传文件
async clickUploadFile(file) {
const formData = new FormData()
formData.append('file', file.file)
const res = await api.post(`xxx`, formData)
}
// 上传成功后，清空组件自带的文件列表
uploadSuccess() {
this.$refs.upload.clearFiles()
}
}
}
</script>
el-select下拉框选项过长
设置下拉框的内容过长时，单行略加文字提示
<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-tooltip
placement="top"
:disabled="item.label.length<17"
>
<div slot="content">
<span>{{item.label}}</span>
</div>
<div class="iclass-text-ellipsis">{{ item.label }}</div>
</el-tooltip>
</el-option>
</el-select>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
}, {
value: '选项2',
label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
}, {
value: '选项3',
label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
}],
value: ''
}
}
}
</script>
<style scoped>
.el-select {
width: 300px;
}
.el-select ::v-deep .popper-class {
width: 300px;
}
.iclass-text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
el-input首尾不能为空格
<el-form :rules="rules" :model="form" label-width="80px">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur'},
{ pattern: /^(?!\s+).*(?<!\s)$/, message: '首尾不能为空格', trigger: 'blur' }
]
}
}
}
}
</script>
el-input type=number 输入中文，焦点上移
当el-input设置type='number'的时候，输入中文，中文不会显示出来，但焦点会上移
<style scoped>
::v-deep .el-input__inner {
line-height: 1px !important;
}
</style>
去除聚焦的时候上下箭头
<el-input class='clear-number-input' type='number'></el-input>
<style scoped>
.clear-number-input ::v-deep input[type='number']::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
</style>
el-form只校验表单其中一个字段
有时候需要校验一些字段，eg: 发送验证码，单独对手机号进行校验
this.$refs.form.validateField('name', valid => {
if(valid) {
console.log('send!');
} else {
console.log('error send!');
return false;
}
});
el-dialog重新打开弹窗，清除表单信息
打开弹窗的时候，在$nextTick中重置表单，或在关闭弹窗后进行重置；
<el-dialog @closed='resetForm'>
<el-form ref='form'>
</el-form>
</el-dialog>
<script>
export default {
methods: {
resetForm() {
this.$refs.form.resetFields();
}
}
}
</script>
el-dialog的destory-on-close属性设置无效
destroy-on-close设置为true后发现弹窗关闭后DOM元素还是会存在，没有被销毁
解决办法： 在el-dialog上添加v-if
<el-dialog :visible.sync='visible' v-if='visible' destroy-on-close>
</el-dialog>
el-table表格内容超出省略
当表格内容过长的时候，手动添加样式比较麻烦，可以添加 show-overflow-tooltip
<el-table-column
prop="address"
label="地址"
width="180"
show-overflow-tooltip
>
</el-table-column>
表格中根据不同状态切换样式
:type="
scope.row.status == '已接单'
? 'primary'
: scope.row.status == '派送中'
? 'success'
: scope.row.status == '已送达'
? 'primary'
: 'danger'
"
<el-table-column
prop="status"
v-if="orderMStatus != '已完成'"
fixed="right"
label="订单状态"
>
<template slot-scope="scope">
<el-tag
:type="
scope.row.status == '已接单'
? 'primary'
: scope.row.status == '派送中'
? 'success'
: scope.row.status == '已送达'
? 'primary'
: 'danger'
"
disable-transitions
>{{ scope.row.status }}</el-tag
>
</template>
</el-table-column>