<template> <div class="flex-start tableCellFormCheck-com"> <!-- <div :class="{ require: isRequire }" style="align-self:end" /> --> <el-form ref="ruleForm" :model="scope.row" size="small" :rules="rules" label-width="15px"> <el-form-item :prop="bindKey" label=" "> <el-select v-model="scope.row[bindKey]" size="small" v-bind="component" @change="change" v-on="handler" > <el-option v-for="(option,index) in scope.row[optionsKey]" :key="index" :value-key="component.valueKey || 'id'" v-bind="option" /> </el-select> </el-form-item> </el-form> </div> </template> <script> export default { name: 'StorageSelect', components: {}, props: { // 行对像 scope: { type: Object, default: null }, // 需要与列的key值对应 bindKey: { type: String, default: '' }, optionsKey: { type: String, default: '' }, // 控制 * 是否显示 isRequire: { type: Boolean, default: false }, // 校验 formRules: { type: Array, default: function() { return [] } }, // 事件对象 handler: { type: Object, default: null }, component: { type: Object, default: null } }, data() { return { rules: {}, selectOptions: [] } }, watch: { }, created() { }, mounted() { this.$set(this.rules, this.bindKey, this.formRules) this.validation(this.scope.row[this.bindKey]) }, methods: { change(val) { this.$set(this.scope.row, this.bindKey, val) this.validation(val) }, validation(val) { this.$refs['ruleForm'].validate().then(res => { this.$emit('changeForm', { val: val, row: this.scope.row, index: this.scope.$index, key: this.bindKey, effectiveState: res }) }).catch(e => { this.$emit('changeForm', { val: val, row: this.scope.row, index: this.scope.$index, key: this.bindKey, effectiveState: e }) }) } } } </script> <style lang="scss"> .tableCellFormCheck-com{ height: 66px; width: 100%; .require:before { content: "*"; color: #f56c6c; margin-right: 4px; } .el-form-item__error{ margin: 2px auto } } </style>