7 用戶管理之踩坑詳解

本實(shí)例中有很多坑，現(xiàn)在進(jìn)行較為詳細(xì)的踩坑說明。

添加用戶

本例中通過點(diǎn)擊一個(gè)button彈出一個(gè)含有表單的dialog框，然后填寫表單實(shí)現(xiàn)新增用戶豌注。

首先拉看看這個(gè)添加用戶的button的一些屬性：

  <el-button type="success" icon="el-icon-plus" @click="addDialog=true">添加用戶</el-button>

這個(gè)比較簡(jiǎn)單，通過@click事件實(shí)現(xiàn)了為變量addDialog賦值的效果灯萍，即彈出一個(gè)dialog對(duì)話框轧铁。

el-dialog

按照官網(wǎng)上引入這個(gè)組件時(shí)出現(xiàn)了很多問題，我們還是來詳細(xì)地分析一下旦棉。

  <el-dialog
    title="新增用戶"
    :visible.sync="addDialog"
    :append-to-body="true"
    width="400px"
    @close="close('addForm')"
  >

這里對(duì)兩個(gè)較為坑的屬性進(jìn)行一下分析齿风，一個(gè)是visible.sync。官網(wǎng)的實(shí)例只給出了visible绑洛，如果使用visible的話救斑，無法通過點(diǎn)擊關(guān)閉按鈕和dialog外部的區(qū)域來實(shí)現(xiàn)關(guān)閉dialog（不知道是不是配合el-form-item一起使用的一個(gè)bug，當(dāng)然也有可能是我使用的不正確= =真屯。）脸候，使用visible.sync則可以避免這個(gè)問題。

第二個(gè)是append-to-body绑蔫，這個(gè)屬性官網(wǎng)也給出了解釋运沦，在第一次開發(fā)時(shí)遇到了問題，但是復(fù)現(xiàn)的時(shí)候好像沒有問題了晾匠？應(yīng)該也是自己的沒有理解透徹茶袒，歡迎各位大佬指點(diǎn)。

然后是@close事件綁定了一個(gè)close方法：

    close(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
      });
    }

這個(gè)方法用于對(duì)話框關(guān)閉時(shí)清空表單信息凉馆，不直接使用resetFields()的原因好像是渲染有一個(gè)過程薪寓，直接使用會(huì)報(bào)錯(cuò)，因此需要使用this.$nextTick()澜共。

el-form

這是表單組件向叉，看看我們這個(gè)例子中是怎么定義的：

    <el-form
      :model="form"
      :label-position="labelPosition"
      status-icon
      ref="form"
      :rules="rules"
    >

前幾個(gè)屬性沒什么好說的，就是正常的綁定數(shù)據(jù)嗦董，設(shè)置表單的位置等母谎，最關(guān)鍵的還是最后一個(gè)rules，顧名思義京革，是為整個(gè)表單添加驗(yàn)證規(guī)則奇唤。

      rules: {
        user: [{ validator: validateUser, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        firm_password: [{ validator: validatePass2, trigger: "blur" }],
        description: [{ validator: validateDesc, trigger: "blur" }]
      }

本例中分別綁定了四個(gè)驗(yàn)證規(guī)則，分別是針對(duì)用戶名匹摇，密碼咬扇，備注來進(jìn)行驗(yàn)證的，在表單失去焦點(diǎn)時(shí)觸發(fā)廊勃。驗(yàn)證規(guī)則有點(diǎn)長(zhǎng)懈贺，在前一篇文章中也給出了，此處就不再詳述。在使用時(shí)一定要記得使用回調(diào)梭灿，否則會(huì)出現(xiàn)問題画侣。

對(duì)話框底部的兩個(gè)button分別是關(guān)閉和提交表單信息。

el-table

由于要對(duì)每一行也就是每一個(gè)用戶單獨(dú)進(jìn)行管理堡妒，所以這里使用了scope配乱，通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)，自然也就方便我們進(jìn)行操作涕蚤。

  <el-table-column align="center" prop="user" label="用戶名" width="auto">
    <template slot-scope="scope">{{ scope.row.user }}</template>
  </el-table-column>
  <el-table-column align="center" prop="level" label="用戶等級(jí)" width="auto">
    <template slot-scope="scope">{{ scope.row.level }}</template>
  </el-table-column>
  <el-table-column align="center" prop="description" label="備注" width="auto">
    <template slot-scope="scope">{{ scope.row.description }}</template>
  </el-table-column>

最后一欄的操作同樣也是彈出一個(gè)dialog并對(duì)該行的用戶進(jìn)行操作宪卿，包括編輯和刪除。

el-popover

這個(gè)組件是我突發(fā)奇想在刪除時(shí)想使用的一個(gè)組件万栅，但是在使用過程中也出現(xiàn)了一些小小的問題佑钾。主要包括了兩個(gè)問題：點(diǎn)擊取消后該組件不關(guān)閉；第一個(gè)問題的解決方法對(duì)表格的第一行不起效烦粒。為此專門提出了以下的解決方法（核心代碼）：

    this.$refs.closepopover.click();
    scope._self.$refs[`popover-${scope.$index}`].doClose();

功能展示

添加用戶

image

修改用戶信息

image

刪除用戶

image