前端——ant design vue select組件使用總結

最近在項目中使用了ant design組件，用的不是很熟，遇到了一點問題，記錄下。

比如我想編輯table的某一條信息，彈出一個對話框然後修改裏面的內容。我希望打開對話框以後select組件能選中對應的那一項，但是傳遞的value爲數字，顯示的項爲文字，這裏我用了這種辦法。

代碼如下：

<template slot-scope="scope" slot="action">
        <a @click="edit(scope)">編輯</a>
      </template>

<a-modal title="編輯信息" v-model="visible" @ok="submit" okText="確認" cancelText="取消" :maskClosable="false" style="width:200px;">
      <a-form :form="editForm">
        <a-form-item label="狀態" :label-col="{ span: 6 }" :wrapper-col="{ span: 10, offset: 2 }">
          <a-select v-decorator="['state']" :rows="4">
            <a-select-option :value="1">啓用</a-select-option>
            <a-select-option :value="0">禁用</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

edit(row) {
      this.editForm.getFieldDecorator('state', { initialValue: row.state });
      this.visible = true;
    }

使用v-decorator非常方便，接着我們在點擊編輯時使用getFieldDecorator設置初始值。暫時寫這麼多...