快捷導(dǎo)航

Vue表單快速上手

更新時間：2022年09月13日 08:53:42 作者：丘比特懲罰陸

工作中vue表單使用的最多的莫過于input、textarea、select等，原生js的基礎(chǔ)上vue通過雙向數(shù)據(jù)綁定等，實現(xiàn)了自己獨(dú)有的一套指令，這是react中沒有的部分，也算是vue的一大特色

普通表單

我們先可以創(chuàng)建一個普通的表單，我們知道的是表單是相對比較復(fù)雜的，antv被我們詬病為就是其表單，這個設(shè)計出來的理念就是和別的組件庫不一樣，我們就在這篇文章分成四個部分來講述，現(xiàn)在我們的第一個部分，就是我們的普通的表單。

操作的步驟：先再main.js引入注冊Form和Input，在BasicForm拷貝剛才的表單布局，這個就是最基礎(chǔ)的表單。接下來就是需要添加一個錯誤校驗，有對應(yīng)的屬性傳遞對應(yīng)的狀態(tài)等。拷貝validateStatus到item中加上對應(yīng)的help文本，如果想要動態(tài)輸入的話也可以，給input雙向綁定fieldA和fieldB，在data里面注冊這兩個值，同時validateStatus也變成動態(tài)的指向fieldAStatus，文本也是動態(tài)指向fieldAHelp。通過監(jiān)聽fieldA的長度，如果小于5改變狀態(tài)和文本，否則就都置為空就行了。同樣的，給按鈕也綁定一個事件handleSubmit，拷貝剛才的監(jiān)聽邏輯，如果通過就console.log輸出一下。

如此就完成了一個最簡單的表單校驗，像這種手動添加錯誤校驗信息是最靈活簡單但是不夠漸變，最好是組件內(nèi)部自動校驗。

  <!--登錄表單區(qū)域-->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
          <!--用戶名-->
  <el-form-item prop="username">
    <el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!--密碼-->
  <el-form-item prop="password">
    <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
     <!--type="password使得密碼隱藏"-->
        </el-form-item>
         <!--按鈕區(qū)域-->
          <el-form-item class="btns">
    <el-button type="primary" @click="login">mua</el-button>
    <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>

<script>
export default {
  data () {
    return {
      // 這里是登錄表單數(shù)據(jù)
      loginForm: {
        username: 'admin',
        password: '991130'
      },
      // 表單的驗證規(guī)則對象
      loginFormRules: {
        username: [
          { required: true, message: '請輸入登錄名稱', trigger: 'blur' },
          { min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '請輸入登錄密碼', trigger: 'blur' },
          { min: 6, max: 15, message: '長度在 6 到 15 個字符', trigger: 'blur' }
        ]
      }
    }
  },
  // 點(diǎn)擊重置按鈕，重置登錄表單
  methods: {
    resetLoginForm () {
      // console.log(this)
      this.$refs.loginFormRef.resetFields()
    },
    login () {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登錄失敗！')
        this.$message.success('登錄成功')
        // 1.將登陸成功之后的token，保存到客戶端的sessionstorage中
        //  1.1項目中除了登錄之外的其他api接口，必須在登陸之后才能訪問
        //  1.2token只應(yīng)在當(dāng)前網(wǎng)站打開期間生效，所以將token保存在sessionstorage中
        window.sessionStorage.setItem('token', res.data.token)
        // 2.通過編程式導(dǎo)航跳轉(zhuǎn)到后臺主頁，路由地址為/home
        this.$router.push('home')
      })
    }
  }
}
</script>

初始數(shù)據(jù)與自動校驗與動態(tài)賦值

目前表單方案主要有兩種，一種是基于雙向綁定的表單校驗（iviewelement）另一種就是ant。數(shù)據(jù)加規(guī)則映射到表單視圖，通過雙向綁定在表單變化的時候繼續(xù)同步到數(shù)據(jù)中對比規(guī)則，這個是理想情況。但是很經(jīng)常是多個地方使用一個數(shù)據(jù)，使用雙向綁定的話可以實現(xiàn)表單與其它數(shù)據(jù)一起修改，這可能是想要的，但是也有可能是我們希望表單數(shù)據(jù)提交后經(jīng)過后臺等等最后返回出來的數(shù)據(jù)再進(jìn)行展示，對這種情況我們就需要復(fù)制或者深復(fù)制一份數(shù)據(jù)，這個就是雙向綁定的模型。Ant選擇把所有數(shù)據(jù)放到表單，data只是提供一個初始化，后面表單就是一個黑盒，里面處理的不會影響外面的數(shù)據(jù)，后續(xù)數(shù)據(jù)如果需要同步到data就可以通過API來同步到data和其它組件等等。

回到form，在data里面實例化一個from（因為main中有use自動把$from掛載到vue實例上，所以就可以訪問到），同時把this進(jìn)去（用于組件底層內(nèi)部，數(shù)據(jù)改變時調(diào)用這個this來更新當(dāng)前組件也就是basicForm）。把這個實例傳遞到最外層那，如此就不需要手動監(jiān)聽、雙向綁定和watch監(jiān)聽了。給input綁定一個v-decorator，接收數(shù)組，第一個是字段名稱、第二個是配對的規(guī)則（required是否必須，min最小長度，message報錯信息）、第三個是初始值的字段。v-decorator的源碼如下，可以看到什么都沒做，僅僅是提供一個標(biāo)志位，也就是當(dāng)我們渲染我們的item時，會查找子組件，如果帶有這個標(biāo)志位就會劫持然后交由我們的from去控制

export function antDecorator(Vue) {
   return Vue.directive('decorator',{});
}
export default {
  //
install: Vue =>{
  antDecorator(Vue);
}
}

按鈕的點(diǎn)擊事件也要改一下，通過form的validateFields，接收err錯誤信息和values接收到的值，如果沒有err說明校驗通過。如此就實現(xiàn)了自動校驗。接下來我們想要數(shù)據(jù)改變后同步給data里面的fieldA和fieldB（即后臺校驗通過后），我們當(dāng)然可以一個個賦值，也可以通過Object.assign往this上賦值即可。如果想通過接口動態(tài)改變表單的值也可以通過form的setFieldsValueAPI來動態(tài)改變其值，值得注意的是初始化的數(shù)據(jù)只是在第一次生效，后續(xù)改變都要通過這個API。

handleSubmit(){
  this.form.validateFields((err,value)=> {
 if(!err) {
   console.log(values);
object.assign(this,values)//全部賦值
}
}
}

data() {
   this.form = this.$form.createForm(this)//初始化一個表單
   return {
       formLauout:'horizontal',
       fieldA:'hello',
       fieldB:''
};
} 
mounted () {
  setTimeout(() = >{ //定時改變一次舒適化改變
   this.form.setFieldsValue({ fieldA:'byebye'})
},3000)
},

發(fā)布表單

結(jié)合vuex和vue-router，建一個store文件夾在其下面建modules文件夾，下面再建一個form.js，導(dǎo)入router、request，定義一個state對象，下包含step對象里面只有payAccount即可。定義一個actions對象，下面一個異步的submitStepForm接收{(diào)commit}和{payload}，調(diào)用request請求，url是‘/api/form’，方式是post，數(shù)據(jù)是payload，返回請求后我們commit一個mutation，命名為saveStepFormData，把payload傳過去，然后路由跳轉(zhuǎn)到‘formep-form/result’結(jié)果頁。

定義一個mutations對象，saveStepFormData接收state和{payload}，我們要在里面改變state里面的step值（拓展運(yùn)算符攤開step和payload，因為理論上是有很多的數(shù)據(jù)）。最后是暴露出這三個對象（同時開啟命名空間?。┰趕tore下面再建一個文件index.js，導(dǎo)入剛才的form.js，在實例化中加一個modules對象，里面丟個form，如此就完成了store，不過需要注意的是外面還有一個store.js（無用可以刪），而之前的mian.js默認(rèn)是找到這個store.js（原本是找到剛才新建的index，被外面這個攔住了），可能會報錯，重啟工程或者指明更清楚的路徑就行。

既然定義了API就往mock里面加多一個form.js，修改方法為POST，返回數(shù)據(jù)為message即可。接下來就是正式寫表單了，首先是第一個表單Step1，手寫

一個a-form指定為horizontal，item的label為付款賬戶。往data里面丟一個布局配置formItemLayout對象，里面設(shè)置labelCol和wrapperCol，當(dāng)然我們還需要在外面創(chuàng)建一個form實例指向當(dāng)前的form，item的labelCol也指向?qū)ο蟮膌abelCol，wrapperCol也指定一下。再加一個a-input，指定decorator，名稱為payAccount，初始化值需要從vuex中?。梢岳糜嬎銓傩阅玫剑?，規(guī)則是必填否則報錯誤提示。再來一個item，里面放button，type為primary，觸發(fā)點(diǎn)擊事件handleSubmit，在方法中定義，先從this中拿到form、$router、$store就不用一個個this.，再調(diào)用form的validateFields校驗一下，無錯則提交給vuex的store，直接commit而不是dispatch，因為第一步無需異步，只是儲存數(shù)據(jù)到step字段，給個type和payload（傳遞values字段），完成后router跳轉(zhuǎn)到第二步（/formep-form-confirm），如此就完成了第一步的表單。接下來開發(fā)這個第二步的表單，復(fù)制第一步的，把input刪除了，這一步就是要顯示這個付款賬戶的{{step.payAccount}}，再來個item，里面放input用來輸入密碼，type改為password，下一個item中加多一個button為提交，另一個改為上一步，分別綁定handleSubmit和onPrev兩個事件，上一步的按鈕給個樣式（margin-left讓它們兩個有點(diǎn)距離）。onPrev的話是

將路由跳轉(zhuǎn)到‘/formep-form/info’，提交事件的話就是通過dispatch，來調(diào)vuex中的actions中的submit最后由其commit來修改store中的值。注意這里傳值的時候記得多傳遞一個第一步的信息（...step、...values），完成之后無需跳轉(zhuǎn)（因為commit完就在那里執(zhí)行了跳轉(zhuǎn)的邏輯，不用重復(fù)寫）。表單三的話給個小提示就行

<template>
    <div>
        <!--面包屑導(dǎo)航區(qū)-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片視圖區(qū)域 -->
<el-card>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-input placeholder="請輸入內(nèi)容" v-model="queryInfo.query" clearable>
<el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
            </el-input>
        </el-col>
        <el-col :span="4">
            <el-button type="primary" @click="goAddpage">添加商品</el-button>
        </el-col>
    </el-row>
    <!-- table表格區(qū)域 -->
    <el-table :data="goodslist" border stripe>
        <el-table-column type="index">
        </el-table-column>
        <el-table-column label="商品名稱"
         prop="goods_name"></el-table-column>
         <el-table-column label="商品價格（元）"
         prop="goods_price" width="95px"></el-table-column>
         <el-table-column label="商品重量"
         prop="goods_weight" width="70px"></el-table-column>
         <el-table-column label="創(chuàng)建時間" prop="add_time" width="140px">
             <template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>
         </el-table-column>
         <el-table-column label="操作" width="130px">
             <template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit">編輯</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeById(scope.row.goods_id)">刪除</el-button>
             </template>
         </el-table-column>
    </el-table>
    <!-- 分頁區(qū)域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
</el-card>
    </div>
</template>
<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      // 商品列表
      goodslist: [],
      // 總書記條數(shù)
      total: 0
    }
  },
  created () {
    this.getGoodsList()
  },
  methods: {
    // 根據(jù)分頁獲取對應(yīng)的商品列表
    async getGoodsList () {
      const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        return this.$message.error('獲取商品列表失敗！')
      }
      this.$message.success('獲取商品列表成功！')
      console.log = res.data
      this.goodslist = res.data.goodslist
      this.total = res.data.total
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodsList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getGoodsList()
    },
    async removeById (id) {
      const confirmResult = await this.$confirm('此操作將永久刪除該商品, 是否繼續(xù)?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消刪除！')
      }
      // eslint-disable-next-line no-undef
      const { data: res } = await this.$http.delete(`goods/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('刪除失敗！')
      }
      this.$message.success('刪除成功！')
      this.getGoodsList()
    },
    goAddpage () {
      this.$router.push('/goods/add')
    }
  }
}
</script>
<style lang="less" scoped>
</style>

到此這篇關(guān)于Vue表單快速上手的文章就介紹到這了,更多相關(guān)Vue表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: