vue結合Element UI如何實現表格數據的修改

時間 2020-05-29

標籤 vue 結合 element 如何實現表格數據修改简体版

原文原文鏈接

1、Element UI中表格數據的修改

在Element UI中，實現修改操做，須要彈出一個對話框，可使用Dialog對話框組件。在data中，咱們須要定義一個數據editDialogVisible，它的做用是控制添加用戶對話框的顯示與隱藏，默認爲隱藏，代碼以下：

// 控制修改用戶對話框的顯示與隱藏，默認爲隱藏
    editDialogVisible: false
複製代碼

在頁面當中，使用Dialog對話框組件，title爲對話框的標題，visible爲是否顯示 Dialog，支持 .sync 修飾符，是boolean類型的值，默認值爲false，咱們能夠給它綁定屬性editDialogVisible控制顯示與隱藏。width爲Dialog 的寬度，能夠設置爲50%，也就是佔據屏幕的百分之五十的位置，代碼以下：

<!-- 修改用戶的對話框 -->
    <el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%">
      <span>這是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
複製代碼

當點擊在每一行的修改按鈕上，纔可以彈出對話框，經過點擊事件調用showEditDialog()方法，代碼以下：

<!-- 修改按鈕 -->
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog()"></el-button>
複製代碼

在這個方法showEditDialog()中，將data中的editDialogVisible的值設置爲true，對話框就顯示了，代碼以下：

// 展現編輯用戶的對話框
    showEditDialog() {
      this.editDialogVisible = true
    }
複製代碼

當點擊修改按鈕的時候，要可以獲取到當前行的數據以及id值，咱們能夠經過scope.row獲取到當前行的數據，scope.row.id就能夠獲取到當前行的id值，傳入showEditDialog方法中，代碼以下：

<!-- 修改按鈕 -->
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
複製代碼

在data中定義一個數據editForm，用來接收響應的值，代碼以下：

// 查詢到的用戶信息對象
    editForm: {}
複製代碼

在showEditDialog()方法中就能夠接收點擊的id值，傳參進去，調用編輯的接口。因爲返回值是promise對象，因此能夠用async和await進行簡化操做。若是響應的狀態碼不爲200，說明修改失敗，進行提示，反之則成功，將返回來的值res.data賦值給data中的editForm，代碼以下：

// 展現編輯用戶的對話框
    async showEditDialog(id) {
      // console.log(id)
      const {data: res} = await this.$http.get('users/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('查詢用戶信息失敗！')
      }
      this.editForm = res.data
      this.editDialogVisible = true
    }
複製代碼

對於數據的修改填寫，須要用到Element UI中的Form表單組件，咱們能夠引用Form表單。el-form是表單的主體對象，el-form-item是表單的每一項。在el-form中，ref是可以經過引用拿到表單的引用對象。model是綁定表單的數據項，rules是綁定表單的校驗規則，label-width是每一項的寬度。在el-form-item中，label是標籤文本，prop是傳入表單域的驗證規則。在el-input中，v-model是可以實現表單域的雙向數據綁定。對於表單中的每一項值，經過data中的editForm，響應得到的數據進行獲取，好比editForm.username的值就是用戶名的值，代碼以下：

<!-- 修改用戶的對話框 -->
    <el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用戶名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="郵箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手機" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDialogVisible = false">確 定</el-button>
      </span>
    </el-dialog>
複製代碼

對於表單的每一項，也須要進行規制驗證，判斷輸入框中輸入的值是不是正確的。在el-form中，:rules="editFormRules" 是綁定的表單驗證規則，也就是須要在data中定義一個數據editFormRules，裏面包含了全部項的驗證規則，在裏面定義規則。對於表單的每一項值，拿到相應對於的規則，須要經過prop屬性，所接受的值就是在editFormRules中定義的規則名稱，required表示爲必填項，min和max表示爲限定的最小長度和最大長度，validator是綁定的自定義驗證規則，代碼以下：

// 修改表單的驗證規則對象
  editFormRules: {
    email: [
      { required: true, message: '請輸入郵箱', trigger: 'blur' },
      { validator: checkEmail, trigger: 'blur' }
    ],
    mobile: [
      { required: true, message: '請輸入手機號', trigger: 'blur' },
      { validator: checkMobile, trigger: 'blur' }
    ]
  }
複製代碼

在修改數據，對話框的表單中修改數據之後，而後再關閉對話框，下一次再修改數據的時候，會發現以前修改的數據還會保留，沒有被清空，而咱們所但願的是每一次打開對話框的時候，表單都是新的，沒有數據內容，須要重置。咱們須要在對話框中綁定一個重置的事件，經過@close綁定editDialogClosed事件，進行重置表單，代碼以下：

<!-- 修改用戶的對話框 -->
<el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
複製代碼

在method中，定義editDialogClosed方法。在Form Methods中，有resetFields方法，它的做用是對整個表單進行重置，將全部字段值重置爲初始值並移除校驗結果。經過ref獲取表單的引用對象，而後再將this.$refs.editFormRef獲取整個表單的數據，調用resetFields()方法，進行表單的重置，代碼以下：

// 監聽修改用戶對話框的關閉
    editDialogClosed () {
      this.$refs.editFormRef.resetFields()
    }
複製代碼

在點擊肯定按鈕進行提交表單的時候，須要對於表單的數據進行一次預校驗，先進行綁定點擊事件，代碼以下：

<el-button type="primary" @click="editUserInfo">確 定</el-button>
複製代碼

在method中，定義editUserInfo()函數，經過this.$refs.editFormRef獲取到整個表單的數據，經過validate方法進行預校驗。若是valid的值爲false，說明校驗失敗，反之則校驗成功。代碼以下：

// 修改用戶信息而且提交
    editUserInfo () {
      this.$refs.editFormRef.validate(valid => {
        console.log(valid)
        if (!valid) return
        // 發起修改用戶信息的數據請求
      })
    }
複製代碼

對於保存修改信息，須要調用編輯用戶提交的接口，進行相應的拼接。若是響應的狀態碼不爲200，說明響應失敗，進行錯誤的提示，反之則響應成功了。在響應修改爲功之後，關閉對話框，從新獲取一次數據列表，最後再進行修改爲功之後的提示，代碼以下：

// 修改用戶信息而且提交
    editUserInfo () {
      this.$refs.editFormRef.validate(async valid => {
        console.log(valid)
        if (!valid) return
        // 發起修改用戶信息的數據請求
        const {data: res} = await this.$http.put('users/' + this.editForm.id, {
          email: this.editForm.email,
          mobile: this.editForm.mobile
        })
        if (res.meta.status !== 200) {
          return this.$message.error('更新用戶信息失敗！')
        }
        // 關閉對話框
        this.editDialogVisible = false
        // 更新數據列表
        this.getUserList()
        // 提示修改爲功
        this.$message.success('更新用戶信息成功！')
      })
    }
複製代碼

2、Element UI中表格數據的編輯實現

Element表格數據的編輯，完整代碼以下：

<template>
    <div>
        <!-- 麪包屑導航區域 -->
        <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>

        <!-- 卡片視圖區域 -->
        <el-card class="box-card">
            <!-- 搜索與添加區域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="請輸入內容" v-model="queryInfo.query" clearable @clear="getUserList()">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="dialogVisible=true">添加用戶</el-button>
                </el-col>
            </el-row>
            <!-- 用戶列表區域 -->
            <el-table :data="userList" :stripe="true" :border="true">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="username" label="用戶名稱"></el-table-column>
                <el-table-column prop="email" label="郵箱"></el-table-column>
                <el-table-column prop="mobile" label="電話"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column prop="mg_state" label="狀態">
                    <template slot-scope="scope">
                        <!-- scope.row 能夠取到當前一行的數據 -->
                        <!-- {{ scope.row }} -->
                        <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操做">
                    <template slot-scope="scope">
                        <!-- 修改按鈕 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
                        <!-- 刪除按鈕 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                        <!-- 分配角色按鈕 -->
                        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分頁區域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加用戶的對話框 -->
        <el-dialog title="添加用戶" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed">
            <!-- 內容的主體區域 -->
            <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="70px">
                <el-form-item label="用戶名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密碼" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="郵箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手機號" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <!-- 底部區域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">確 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改用戶的對話框 -->
        <el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
          <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
            <el-form-item label="用戶名">
              <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="郵箱" prop="email">
              <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手機" prop="mobile">
              <el-input v-model="editForm.mobile"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">確 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script> export default { data () { // 驗證郵箱的校驗規則 var checkEmail = (rule, value, callback) => { // 驗證郵箱的正則表達式 const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ if (regEmail.test(value)) { // 驗證經過，合法的郵箱 return callback() } // 驗證不經過，不合法 callback(new Error('請輸入合法的郵箱')) } // 驗證手機號的驗證規則 var checkMobile = (rule, value, callback) => { // 驗證手機號的正則表達式 const regMobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ if (regMobile.test(value)) { // 驗證經過，合法的手機號 return callback() } // 驗證不經過，不合法 callback(new Error('請輸入合法的手機號')) } return { // 獲取用戶列表的參數對象 queryInfo: { // 查詢參數 query: '', // 當前的頁碼數 pagenum: 1, // 每頁顯示多少條數據 pagesize: 2 }, // 獲取的用戶列表 userList: [], // 總數 total: 0, // 控制添加用戶對話框的顯示與隱藏，默認爲隱藏 dialogVisible: false, // 添加用戶的表單數據 addForm: { username: '', password: '', email: '', mobile: '' }, // 添加表單的驗證規則對象 addFormRules: { username: [ { required: true, message: '請輸入用戶名', trigger: 'blur' }, { min: 3, max: 10, message: '長度在 3 到 10 個字符', trigger: 'blur' } ], password: [ { required: true, message: '請輸入密碼', trigger: 'blur' }, { min: 3, max: 10, message: '長度在 6 到 15 個字符', trigger: 'blur' } ], email: [ { required: true, message: '請輸入郵箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' } ], mobile: [ { required: true, message: '請輸入手機號', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] }, // 控制修改用戶對話框的顯示與隱藏，默認爲隱藏 editDialogVisible: false, // 查詢到的用戶信息對象 editForm: {}, // 修改表單的驗證規則對象 editFormRules: { email: [ { required: true, message: '請輸入郵箱', trigger: 'blur' }, { validator: checkEmail, trigger: 'blur' } ], mobile: [ { required: true, message: '請輸入手機號', trigger: 'blur' }, { validator: checkMobile, trigger: 'blur' } ] } } }, created () { this.getUserList() }, methods: { async getUserList () { const {data: res} = await this.$http.get('users', { params: this.queryInfo }) if (res.meta.status !== 200) { return this.$message('獲取用戶列表失敗！') } this.userList = res.data.users this.total = res.data.total console.log(res) }, // 監聽 pageSize 改變的事件 handleSizeChange (newSize) { // console.log(newSize) // 將監聽接受到的每頁顯示多少條的數據 newSzie 賦值給 pagesize this.queryInfo.pagesize = newSize // 修改完之後，從新發起請求獲取一次數據 this.getUserList() }, // 監聽 頁碼值 改變的事件 handleCurrentChange (newPage) { // console.log(newPage) // 將監聽接受到的頁碼值的數據 newPage 賦值給 pagenum this.queryInfo.pagenum = newPage // 修改完之後，從新發起請求獲取一次數據 this.getUserList() }, // 監聽 switch 開關狀態的改變 async userStateChange (userInfo) { console.log(userInfo) const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`) if (res.meta.status !== 200) { // 更新失敗，將狀態返回初始狀態 this.userInfo.mg_state = !this.userInfo.mg_state this.$message.error('更新用戶狀態失敗！') } this.$message.success('更新用戶狀態成功！') }, // 監聽添加用戶對話框的關閉事件 addDialogClosed () { this.$refs.addFormRef.resetFields() }, // 點擊按鈕，添加新用戶 addUser () { this.$refs.addFormRef.validate(async valid => { // 若是valid的值爲true，說明預校驗成功，反之則校驗失敗 // console.log(valid) // 校驗失敗 if (!valid) return // 校驗成功，能夠發起添加用戶的網絡請求 const {data: res} = await this.$http.post('users', this.addForm) if (res.meta.status !== 201) { this.$message.error('添加用戶失敗！') } this.$message.success('添加用戶成功！') // 隱藏添加用戶的對話框 this.dialogVisible = false // 從新獲取用戶列表數據 this.getUserList() }) }, // 展現編輯用戶的對話框 async showEditDialog(id) { // console.log(id) const {data: res} = await this.$http.get('users/' + id) if (res.meta.status !== 200) { return this.$message.error('查詢用戶信息失敗！') } this.editForm = res.data this.editDialogVisible = true }, // 監聽修改用戶對話框的關閉 editDialogClosed () { this.$refs.editFormRef.resetFields() }, // 修改用戶信息而且提交 editUserInfo () { this.$refs.editFormRef.validate(async valid => { console.log(valid) if (!valid) return // 發起修改用戶信息的數據請求 const {data: res} = await this.$http.put('users/' + this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile }) if (res.meta.status !== 200) { return this.$message.error('更新用戶信息失敗！') } // 關閉對話框 this.editDialogVisible = false // 更新數據列表 this.getUserList() // 提示修改爲功 this.$message.success('更新用戶信息成功！') }) } } } </script>

<style lang="less" scoped> </style>

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。