plus-ui/src/components/Options/index.vue

<!-- 档位配置 插件 -->
<template>
  <el-table-column :label="`选项${index + 1}：`" v-for="(item, index) in posNum" :key="item" class="m-t-20"
    :prop="`gearValue[${index}]`" :rules="ruleValidate.gearValue" align="center" prop="options">
    <el-input
      :min="0"
      :formatter="value => `${value}`.replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1')"
      placeholder="请填写" :disabled="isSee" class="w-200"
      v-model="form.value.options[index]"
    />
    <v-image v-if="!isSee&&posNum<maxPosLen" :src="addImg" class="img-btn" @click="changePos(index,'add')"/>
    <v-image v-if="!isSee&&posNum>1" :src="delImg" @click="changePos(index,'del')" class="img-btn"/>
  </el-table-column>
</template>


<script>
import addImg from '@/assets/images/add-icon.png'
import delImg from '@/assets/images/del-icon.png'
export default {
    props: {
        enumData: {
            type: Object,
            default: null
        },
        isSee: {
            type: Boolean,
            default: false
        },
        // label宽度
        configWidth: {
            type: Number,
            default: 120
        }
    },
    data() {
        return {
            addImg: addImg,
            delImg: delImg,
            maxPosLen: 20, // 最多20档
            posNum: 1, // 当前档位数量
            formData: {
                gearValue: [null] // null:为了不让显示默认1
            },
            ruleValidate: {
                gearValue: [
                    { required: true, message: '请填写档位值' }
                ]
            }
        }
    },

    methods: {
        // 提交的校验
        handleValidate() {
            return new Promise((resolve, reject) => {
                this.$refs.formPosition.validate((valid) => {
                    if (valid) {
                        // 数据转换为接口所需要的形式
                        let obj = {};
                        if (this.formData.gearValue) {
                            if (this.formData.gearValue.length[0] === null) {
                                obj.gearValue = null;
                            } else {
                                obj.gearValue = this.formData.gearValue.join();
                            }
                        } else {
                            obj.gearValue = null;
                        }
                        resolve(obj)
                    }
                })
            })
        },

        // 增删档位
        changePos(idx, actType) {
            if (actType === 'add') {
                if (this.formData.gearValue.length < 20) {
                    this.posNum++;
                    this.formData.gearValue.splice(idx + 1, 0, null);
                }
            } else {
                this.formData.gearValue.splice(idx, 1);
                this.posNum--;
            }
        },

        // 初始化(在父组件中调用)
        initData(obj) {
            if (obj.gearValue) {
                if (obj.gearValue instanceof Array) {
                    this.formData.gearValue = obj.gearValue;
                } else if (typeof obj.gearValue === 'string') {
                    let arr = [];
                    if (obj.gearValue.indexOf(';') !== -1) {
                        // 多个-接口传回来的（接口返回的是;分割）
                        arr = obj.gearValue.split(';');
                    } else {
                        // 多个-正在编辑中 / 只有一个
                        arr = obj.gearValue.split(',');
                    }
                    this.formData.gearValue = arr.map(item => {
                        return Number(item);
                    })
                }
            } else {
                this.formData.gearValue = [null];
            }
            this.posNum = this.formData.gearValue.length;
        },

        // 重置表单(在父组件中调用)
        resetForm() {
            this.$refs.formPosition.resetFields();
            this.formData.gearValue = [null];
        }
    }
}
</script>

<style scoped>
.img-btn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 20px;
    cursor: pointer;
}
</style>