1.如何修改el-dialog的样式？
要修改dialog的样式不能直接在<style scoped>中修改，这样修改后不会生效。做法是把scoped去掉，然后在dialog标签上自定义一个class，最好不要和其他的class同名，然后通过此class选择器再去修改里面的相关样式即可。
<template> <el-dialog title="信息" :visible.sync="dialogFormVisible" width="60%" class="my-info-dialog"> 我是弹框 </el-dialog> </template> <style> .my-info-dialog .el-dialog__body { padding: 0px; } </style>
上例是修改弹框中内容距离标题的距离。
2.表单中el-select和el-input的长度不一致？
当他们一起使用时，一般select长度是默认的，会比input短，只需要设置其宽度是100%即可。
.el-form-item .el-select { 100%; }
3.el-table使用checkbox时，获取选中数据的id？
使用checkbox选中时有一个触发事件，那么触发事件可以调用下面的方法：
//多选框选中事件 handleSelectionChange(val) { this.multipleSelection = [] //val是选中的数据的数组 val.forEach(item => { const id = item.id //判断数组中是否包含某个值 if (this.multipleSelection.indexOf(id) == -1) { this.multipleSelection.push(id) } }) }
5.表单及行内元素验证
5.1表单及验证
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option v-for="item in regionOption" :label="item.label" :value="item.value" :key="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style=" 100%;">
</el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style=" 100%;">
</el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio :label="1">线上品牌</el-radio>
<el-radio :label="2">线下场地</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item label="参与人数" prop="person">
<el-input v-model.number="ruleForm.person"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-button @click="resetForm('ruleForm')">取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: '',
data() {
//自定义验证规则
var validatePerson = (rule, value, callback) => {
if (value == '' || value == null) {
callback(new Error('请输入参与人数'));
} else {
if (!Number.isInteger(value)) {
callback(new Error('参与人数只能是整数'));
}
callback();
}
}
return {
ruleForm: {},
regionOption: [
{
label: '上海',
value: 0,
},
{
label: '北京',
value: 1,
},
{
label: '广州',
value: 2,
}
],
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
],
person: [
{ required: true, validator: validatePerson, trigger: 'blur' }
]
}
}
},
methods: {
//表单提交验证
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('已通过验证')
console.log(this.ruleForm)
}
});
},
//清空输入框
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
.demo-ruleForm {
500px;
}
</style>
以上的代码中包含了表单默认的验证和自定义的验证，model必须存在，它表示表单的内容存在哪个对象中。另外，对应el-form-item中，需要验证里面嵌套的输入框，外面使用required表示必填，里面再使用el-form-item和prop属性验证即可，上述的活动时间是个很好的例子。
5.2验证扩展
除了上述的方法指定字段为必填项外，还可以根据条件来控制某个字段是否为必填字段。
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="必填项" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="动态必填项" prop="name2" :rules="isNeed?rules.name2:[]">
<el-input v-model="ruleForm.name2"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
<el-button @click="isNeed = true">必填</el-button>
<el-button @click="isNeed = false">非必填</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: '',
data() {
return {
isNeed: true,
ruleForm: {},
rules: {
name: [{
required: true,
message: '必填项不能为空',
trigger: 'blur'
}],
name2: [{
required: true,
message: '动态必填项不能为空',
trigger: 'blur'
}],
}
}
},
methods: {
//表单提交验证
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('已通过验证')
console.log(this.ruleForm)
}
});
},
}
}
</script>
<style>
</style>
上述在需要动态验证的字段上加上rules属性，当条件为真时就进行指定的验证，条件为假时就是空数组即不进行验证。对于那种不同的条件必填项不同的情况非常的适用。
5.3清除表单验证
需要补充一点，表单的验证也是可以清空的，它有自带的清除方法：
this.$nextTick(() =>{ this.$refs['ruleForm'].clearValidate() })
6.在el-dialog中使用ref找不到元素？
当在el-aidlog中给某个标签使用ref属性后，获取时总是显示undefined，原因是在获取时el-dialog还未渲染完成。因此可使用nextTick中再获取。
this.$nextTick(() => { this.$refs['image-upload'].showFileList() })
7.el-input输入框值输入无显示怎么解决？
有时候el-input由于嵌套的层级比较多，数据双向绑定无效。有两种解决方案，一是减少层级的嵌套，这对于必须嵌套多层的页面来说，无法解决。
第二种方法：在嵌套的无法进行动态绑定的页面的输入框上添加一个input事件，在input执行的方法中强制刷新数据：
<template>
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="必填项" prop="name">
<el-input v-model="ruleForm.name" @input="inputChange"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: '',
data() {
return {
ruleForm: {},
}
},
methods: {
inputChange(e) {
//强制刷新
this.$forceUpdate()
}
}
}
</script>
<style>
</style>