寫了個路由管理頁面，點擊添加路由彈出 modal，填寫表單，并進行自動驗證。
但是用<div slot="footer">無法正確渲染按鈕。

代碼：

html片段：

<Modal v-model="addRouteModal" title="添加路由">
        <Form ref="newRouteInModal" :model="newRouteInModal" :rules="routeValidate" label-position="left" :label-width="100">
            <FormItem prop="target" label="IP地址">
                <Input v-model="newRouteInModal.target" :autofocus="true"></Input>
            </FormItem>
            <FormItem prop="genmask" label="子網(wǎng)掩碼">
                <Input v-model="newRouteInModal.genmask"></Input>
            </FormItem>
            <FormItem prop="gateway" label="網(wǎng)關(guān)地址">
                <Input v-model="newRouteInModal.gateway"></Input>
            </FormItem>

            <div slot="footer">
                <FormItem>
                    <Button type="primary" @click="addRouteModalOnOk('newRouteInModal')">添加</Button>
                    <Button type="ghost" @click="handleReset('newRouteInModal')">取消</Button>
                </FormItem>
            </div>

        </Form>
    </Modal>

js片段：

handleReset(name) {
    this.$refs[name].resetFields();
},

addRouteModalOnOk(name) {
    this.$refs[name].validate((valid) => {
        if (valid) {
            this.$Message.success('Success!');
        } else {
            this.$Message.error('Fail!');
        }
    });
},

如果用modal原生按鈕的話會丟失<FormItem>屬性，this.$refs[name].validate就會失效。

有啥辦法能在modal中使用form的表單驗證功能嗎？