Threetowns Otherblogs 项目详解：Tabs标签页、Form表单与Vue Table表格渲染完整指南

一、Tabs标签页

• 注意：name使用，参考 Tabs 标签页

<Tabs type="card" @on-click="getServerRank">
   <TabPane v-for="tab in serverType.list"
     :key="tab.value"
     :label="tab.label"
     :name="tab.value"></TabPane>
</Tabs>

二、Form表单

2.1 Input 输入框

<Input size="large"
    v-model="mapServer.searchKey"
    @on-enter="triggerSearch"
    @on-click="triggerSearch"
    icon="ios-search-strong"
    placeholder="请输入关键字" style="width: 220px;float: right;"></Input>

• 通过 icon 属性可以在输入框右边加一个图标。点击图标，会触发 on-click 事件。
• on-enter：按下回车键时触发。

2.2 表单验证

2.2.1 常规验证

2.2.2 两次密码是否一致

2.2.3 未填写不验证，填写验证

iview/iview#3635

2.2.4 验证部分字段

ModifyPhoneSendSMSCode(name){
    this.$refs[name].validateField( phone , (valid) => {
        if(!!!valid) {
            // TODO
        }
    })
}

• iview form

三、table表格

3.1 render

• vue render

{ title:  操作 , key:  action , render: function(h, params) {
        return h( div , [
            h( a , {
                attrs: {
                    href:  /price-details ,
                    target:  _blank 
                },
                class:  link 
            },  查看明细 )
        ]);
    }
}