vue結合Element UI如何實現表格數據的新增操做

時間  2020-05-29
標籤 vue 結合 element 如何 實現 表格 數據 新增 简体版
原文   原文鏈接

1、Element UI中表格數據的新增

  1. 在Element UI中，實現新增操做，須要彈出一個對話框，可使用Dialog對話框組件。在data中，咱們須要定義一個數據dialogVisible，它的做用是控制添加用戶對話框的顯示與隱藏，默認爲隱藏，也就是不展現，代碼以下：
dialogVisible: false
複製代碼
  1. 在頁面當中，使用Dialog對話框組件，title爲對話框的標題visible爲是否顯示 Dialog，支持 .sync 修飾符，是boolean類型的值，默認值爲false，咱們能夠給它綁定屬性dialogVisible控制顯示與隱藏。width爲Dialog 的寬度，能夠設置爲50%，也就是佔據屏幕的百分之五十的位置。
<!-- 添加用戶的對話框 -->
    <el-dialog title="添加用戶" :visible.sync="dialogVisible" width="50%">
        <!-- 內容的主體區域 -->
        <span>這是一段信息</span>
        <!-- 底部區域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
        </span>
    </el-dialog>
複製代碼
  1. 在添加的按鈕當中，給它綁定一個事件，控制dialogVisible，默認爲false隱藏，不展現。當點擊按鈕之後，值就變爲true，展現，代碼以下：
<el-button type="primary" @click="dialogVisible = true">添加用戶</el-button>
複製代碼
  1. 對於數據的新增填寫，須要用到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是可以實現表單域的雙向數據綁定，代碼以下：
<!-- 內容的主體區域 -->
    <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>
複製代碼
  1. 對於表單中的每一項填寫的內容值，經過雙向數據綁定得到。在以前的el-form中，:model="addForm"是綁定表單的數據，也就是須要在data中定義一個數據addForm，進行綁定表單的全部數據。而對於表單中的每一項值，也就是在el-input中，經過v-model綁定addForm中的每一項值，每個表單數據都須要在addForm中去定義，這樣纔可以獲取到相應的數據，代碼以下：
// 添加用戶的表單數據
  addForm: {
    username: '',
    password: '',
    email: '',
    mobile: ''
  }
複製代碼
  1. 對於表單的每一項，也須要進行規制驗證，判斷輸入框中輸入的值是不是正確的。在el-form中，:rules="addFormRules" 是綁定的表單驗證規則，也就是須要在data中定義一個數據addFormRules，裏面包含了全部項的驗證規則，在裏面定義規則。對於表單的每一項值，拿到相應對於的規則，須要經過prop屬性，所接受的值就是在addFormRules中定義的規則名稱，required表示爲必填項，min和max表示爲限定的最小長度和最大長度，validator是綁定的自定義驗證規則，代碼以下：
// 添加表單的驗證規則對象
  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' }
    ]
  }
複製代碼
  1. 對於表單的自定義驗證規則，咱們能夠在data中定義校驗規則，它其實是一個函數。好比郵箱的驗證規則checkEmail， var checkEmail = (rule, value, callback) => {}，第一個值是規則，第二個值是傳入對象的值，也就是輸入框中輸入的值，第三個值是回調函數。在對象裏面寫驗證規則，好比能夠定義驗證的正則表達式，經過test()方法判斷輸入的值是否符合驗證規則。若是符合，返回callback()。若是不符合，那麼就經過new Error()方法提示相應的錯誤信息。在addFormRules中，經過validator就能夠綁定相應的每一項驗證規則，經過規則名稱，代碼以下：
// 驗證郵箱的校驗規則
    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('請輸入合法的手機號'))
    }
複製代碼
  1. 在新增數據，對話框的表單中輸入數據之後，而後再關閉對話框，下一次再添加數據的時候，會發現以前填的數據還會保留，沒有被清空，而咱們所但願的是每一次打開對話框的時候，表單都是新的，沒有數據內容，須要重置。咱們須要在對話框中綁定一個重置的事件，經過@close綁定addDialogClosed事件，進行重置表單，代碼以下：
<el-dialog title="添加用戶" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed">
複製代碼
  1. 在method中，定義addDialogClosed事件，經過以前給表單ref獲取到的引用對象addFormRef，而後再經過this.$refs.addFormRef去獲取整個表單的數據，再經過resetFields()就能夠清空表單數據，達到重置表單的效果了。在Form表單組件中，在Form Methods中，有resetFields方法，它的做用是對整個表單進行重置，將全部字段值重置爲初始值並移除校驗結果，代碼以下：
// 監聽添加用戶對話框的關閉事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    }
複製代碼
  1. 對於新增數據的對話框，當在填寫完表格數據之後，點擊肯定按鈕，發送保存數據，關閉對話框，須要對錶格填寫的數據進行一次預校驗，判斷數據是否有誤。只有當填寫的數據是正確的，纔可以保存和新增數據。 咱們能夠如今肯定按鈕的位置，綁定一個點擊事件addUser，代碼以下：
<!-- 底部區域 -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">確 定</el-button>
    </span>
複製代碼
  1. 在method中，定義addUser方法，經過this.$refs.addFormRef能夠拿到整個表單的數據。在Form表單組件中，Form Methods中，有一個validate方法，它的做用是對整個表單進行校驗的方法，參數爲一個回調函數。該回調函數會在校驗結束後被調用，並傳入兩個參數：是否校驗成功和未經過校驗的字段。若不傳入回調函數，則會返回一個 promise。咱們能夠在拿到表單數據之後，經過validate方法進行表單數據的預校驗，傳入valid參數。若是valid的值爲true，說明預校驗成功，反之則校驗失敗，代碼以下：
// 點擊按鈕，添加新用戶
    addUser () {
      this.$refs.addFormRef.validate((valid) => {
        // 若是valid的值爲true，說明預校驗成功，反之則校驗失敗
        // console.log(valid)
        // 校驗失敗
        if (!valid) return
      })
    }
複製代碼
  1. 在校驗表單數據成功之後，就能夠發起添加用戶的網絡請求，調用相應的api接口發起添加請求。因爲返回值爲promise對象，全部能夠用async和await進行簡化操做，定義返回數據爲res。若是狀態碼不爲201，說明新增失敗，反之則新增成功。在新增成功之後，將data中定義的dialogVisible的值從新設置爲false，關閉新增的對話框，再調用getUserList()方法，從新獲取用戶列表數據，代碼以下：
// 點擊按鈕，添加新用戶
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()
  })
}
複製代碼

2、Element UI中表格數據的新增實現

  1. 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"></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>
    </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' } ] } } }, 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() }) } } } </script>

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

複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程