Element-UI使用相关问题

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 {
    width: 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="width: 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="width: 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 {
        width: 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>