配置

方法

显示文本

<p-sn :temp-name="tplNameOne" v-model="snOne"></p-sn>

slot

<el-form ref="refForm" :model="form" :rules="formRule">
    <p-sn :temp-name="tplNameTwo" v-model="form.sn" :auto="false" ref="sn">
        &lt;!-- 配合el-form使用 -->&gt;
        <tpl v-slot="scope">
            <el-form-item label="流水号" prop="sn">
                <el-input :value="scope.value" readonly></el-input>
            </el-form-item>
        </tpl>
    </p-sn>
    <el-button type="primary" v-on:click="saveData"> 校验非空 </el-button>
</el-form>

data() {
    return {
        formRule: {
            sn: [{ required: true, message: '流水号不能为空' }],
        },
        form: {
            sn: undefined,
        },
    }
},
methods: {
    // 校验非空
    saveData() {
        try {
            this.$refs.refForm.validate()
        } catch (e) {}
    },
    // 获取/刷新流水号
    refreshSn() {
        this.$refs.sn.refresh()
    },
    // 重置
    clearSn() {
        this.tplNameTwo = ''
    },
}