项目场景:
项目场景:由于前些天,弄了一个下拉选择,也可以输入的,input输入框,但我感觉效果并不是很优美,所以今天对以前的代码,改进并进行优化。达到一个完美的效果。代码CV就可以用前提是你得将数据参数改为你的。
问题描述
昨天的代码,参照网络上写的,但是我感觉有些许问题。
# 例如 :disabled="IsDisabled"虽然报错不影响效果,到就是别捏。
Property or method “xxxx“ is not defined on the instance but referenced during render. Vue报错
解决方案:
1:表单功能解决
在表单中使用 <el -select> 标签
<el-form-item label="xxx方法:" prop="xxxName" label-width="160px">
<el-select v-model="form.xxxName" filterable clearable placeholder="请选择xxx名称"
popper-class="customerPopper">
<el-option v-for="(item, index) in xxxList" :key="index" :label="item.xxxName"
:value="item.xxxName" />
</el-select>
</el-form-item>
方法中:
XXXtment() {
getxxxInfo().then(data => {
if (data.code === 200) {
this.xxxList = data.data
} else {
this.$message.error(data.msg);
}
})
},
只要在页面一加载就执行该方法,数据装入xxxlist中。
2:表单样式
虽然上诉功能是已经实现了,但样式缺不尽人意对于强迫症的我,是难以接受的。
例如:这样的参差不齐,肯定验收不了!那就改
使用div标签把整个表单包住
<div :class="['top', device == 'mobile' ? 'phoneApp' : '']">
<div>
在 <el-form>里引入自定义样式
<el-form :inline="true" ref="form" :model="form" :rules="rules" class="demo-form-inline Data_select ">
样式如下:
.top {
width: 620px;
height: 100%;
margin: 30px auto;
border-radius: 10px;
/*上 右 下 左*/
padding: 30px 0 15px 0;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
text-align: left;
.Data_select {
::v-deep .el-input__inner {
width: 420px;
}
::v-deep .block .el-input__inner {
width: 210px;
}
::v-deep .block div {
width: 210px;
float: left;
}
.u-icon {
margin-left: 160px;
color: #666;
z-index: 9999;
}
}
.U_btn {
display: flex;
justify-content: center;
.u_preser {
margin-right: 10px;
}
}
}
问题解释: device :是判断手机端还是pc端的,你看你需求加与不加
# 定义
computed: {
...mapState({
device: state => state.app.device,
}),
},
# 方法
methods: {
openCustomerDialog(e) {
this.customerDialog = true
},
}
总结:
有问题,欢迎留言咨询!