欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例

 更新時(shí)間：2019年03月06日 14:24:31   作者：小周sri的碼農(nóng)  
這篇文章主要介紹了vue2.0結(jié)合Element-ui實(shí)戰(zhàn)案例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言

我們將會(huì)選擇使用一些 vue 周邊的庫(kù)vue-cli, vue-router,axios,moment,Element-ui搭建一個(gè)前端項(xiàng)目案例，后端數(shù)據(jù)接口，會(huì)使用json-server快速搭建一個(gè)本地的服務(wù)，方便對(duì)數(shù)據(jù)的增刪改查，

利用以上技術(shù)我們會(huì)搭建一個(gè)vue案例，效果展示圖：

以上就是我們最終要實(shí)現(xiàn)的全部效果，我會(huì)一塊一塊的講解，關(guān)于腳手架安裝和json-server搭建，在本次博客中，不會(huì)講解，如果想看的話，在小編的博客中，也有講解關(guān)于腳手架搭建和json-server搭建，如果想學(xué)習(xí)的話，可以看一下。

1.項(xiàng)目結(jié)構(gòu)展示

左邊第一個(gè)是前端項(xiàng)目結(jié)構(gòu)，第二個(gè)為json-server服務(wù)端

2.頁(yè)面搭建

在本次案例中，小編采用Element-ui快速搭建前端頁(yè)面，以提高效率。如果不了解的話，可以去官網(wǎng)看一下

2.1安裝element-ui

通過(guò)npm install element-ui -S 安裝前端ul框架，安裝完之后，并在main.js引入

import ElementUI from 'element-ui'<br>
import 'element-ui/lib/theme-chalk/index.css'<br><br>Vue.use(ElementUI)

2.2頁(yè)面布局UserInfo.vue

直接通過(guò)element-ui中table布局，把整體建構(gòu)頁(yè)面布局完成，

<h1>用戶信息管理界面</h1>

  <el-row>

    <el-col :span="20" :push='2'>

      <div>

        <el-form :inline="true">

          <el-form-item style="float: left" label="查詢用戶信息:">

            <el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></el-input>

          </el-form-item>

          <el-form-item style="float: right">

            <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>

          </el-form-item>

        </el-form>

      </div>

      <div class="table">

        <el-table

          :data="searchUserinfo(keyUser)"

          border

          style="width: 100%">

          <el-table-column

           type="index"

           label="序號(hào)"

           align="center"

           width="60">

          </el-table-column>

          <el-table-column

           label="日期"

           align="center"

           width="120">

           <template slot-scope="scope">

            <span>{{ scope.row.date | moment}}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="姓名"

           align="center"

           width="100">

           <template slot-scope="scope">

            <span>{{ scope.row.name }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="郵箱"

           align="center"

           width="160">

           <template slot-scope="scope">

            <span>{{ scope.row.email }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="標(biāo)題"

           align="center"

           width="160">

           <template slot-scope="scope">

            <span>{{ scope.row.title }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="評(píng)價(jià)"

           align="center"

           width="200">

           <template slot-scope="scope">

            <span>{{ scope.row.evaluate }}</span>

           </template>

          </el-table-column>

          <el-table-column

           label="狀態(tài)"

           align="center"

           width="160">

           <template slot-scope="scope">

            <span>{{ scope.row.state }}</span>

           </template>

          </el-table-column>

          <el-table-column label="操作" fixed="right">

           <template slot-scope="scope">

            <el-button

             size="mini"

             @click="handleEdit(scope.$index, scope.row)">編輯</el-button>

            <el-button

             size="mini"

             type="danger"

             @click="handleDelete(scope.$index, scope.row)">刪除</el-button>

           </template>

          </el-table-column>

         </el-table>

      </div>

    </el-col>

  </el-row>

2.3頁(yè)面數(shù)據(jù)獲取并展示

通過(guò)axios請(qǐng)求本地搭建的服務(wù)數(shù)據(jù)，把得到的數(shù)據(jù)展示到頁(yè)面當(dāng)中。

也是通過(guò)cnpm install axios --save安裝并在main.js中引入

import axios from 'axios'
Vue.prototype.$axios = axios

我們需要在方法methods中定義一個(gè)getUserInfo方法，用于請(qǐng)求數(shù)據(jù)

data () {
  return {
    tableData: [], 用于存放數(shù)據(jù)

    }  
}
getUserInfo() {
 this.$axios.get('http://localhost:3000/data').then(res => {
  this.tableData = res.data  
 })
},

這是時(shí)候，數(shù)據(jù)是請(qǐng)求到了，但是頁(yè)面并為展示，這就關(guān)系到vue的生命周期。如果對(duì)vue生命周期不是很了解的話，可以官網(wǎng)仔細(xì)看一遍，

我們只需要在created這個(gè)生命周期鉤子中，調(diào)用我們請(qǐng)求數(shù)據(jù)的方法就可以把數(shù)據(jù)展示到頁(yè)面中。這樣我們就完成第一步了，頁(yè)面數(shù)據(jù)請(qǐng)求展示created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。

3.添加數(shù)據(jù)

剛才我們已經(jīng)完成第一步，把后臺(tái)的數(shù)據(jù)展示到前端頁(yè)面中，接下來(lái)我們對(duì)數(shù)據(jù)進(jìn)行添加，頁(yè)面全部都是用element搭建

3.1頁(yè)面結(jié)構(gòu)搭建，把AddUserInfo.vue組件當(dāng)成一個(gè)子組件，在父組件中引入這個(gè)子組件，點(diǎn)擊添加按鈕，彈出這個(gè)添加對(duì)話框

<template>
 <div class="hello">
  <el-dialog title="添加用戶信息" :visible.sync="dialogAdd.show">
   <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="formDate.date"
       type="date"
       placeholder="選擇日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
     <el-input v-model="formDate.name"></el-input>
    </el-form-item>
    <el-form-item label="郵箱" prop="email">
     <el-input v-model="formDate.email"></el-input>
    </el-form-item>
    <el-form-item label="標(biāo)題" prop="title">
     <el-input v-model="formDate.title"></el-input>
    </el-form-item>
    <el-form-item label="評(píng)價(jià)" prop="evaluate">
     <el-input v-model="formDate.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="狀態(tài)" prop="state">
     <el-input v-model="formDate.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAdd.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormAdd('formdong')">確 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>

3.2我們?cè)诟附M件UserInfo中引入子組件AddUserInfo.vue,

<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> //使用這個(gè)組件，
import AddUser from './AddUserInfo.vue'  //引入組件 
 components:{  //注冊(cè)
   AddUser,
 }

3.3通過(guò)點(diǎn)擊父組件的添加按鈕觸發(fā)子組件彈出框

dialogAdd是我們?cè)诟附M件定義的的，需要傳遞給子組件，

<el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>

在data定義用于是否彈出添加彈出框，默認(rèn)false不彈出，只有點(diǎn)擊添加按鈕的時(shí)候才彈出彈出框

dialogAdd:{

    show:false

   },

methods方法中

hanldeAdd(){ //添加

 this.dialogAdd.show = true;  //彈出對(duì)話框

 },

3.4子組件需要接受父組件傳遞的方法.并請(qǐng)求數(shù)據(jù)。實(shí)現(xiàn)添加

<script>
export default {
 name: 'AddUser',
 props:{
  dialogAdd:Object
 },
 data () {
  return {
   formDate:{
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },
   formrules:{
    date:[{required:true,message:"日期不能為空",trigger:"blur"}],
    name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
    email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormAdd(formdong) {
    this.$refs[formdong].validate((valid) => {
     if (valid) {
      this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
        this.$message({
          type:"success",
          message:"添加信息成功"
        })
        this.dialogAdd.show = false;
        this.$emit('update');  
 
      })
      this.formDate = ""
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>

this.$emit('update'); 子組件數(shù)據(jù)發(fā)生改變了，父組件視圖卻沒(méi)有更新，這時(shí)候通過(guò)子創(chuàng)父，this.$emit,想父組件發(fā)送子組件傳遞的方法，

<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser> 
@update="getUserInfo"  //接受子組件傳遞過(guò)來(lái)的方法去更新視圖

4.實(shí)現(xiàn)刪除　

<el-button
  size="mini"
  type="danger"
 @click="handleDelete(scope.$index, scope.row)">刪除</el-button>

刪除數(shù)據(jù)需要根據(jù)id去刪除，使用es6模板字符串進(jìn)行拼接

handleDelete(index,row) {
    // 刪除用戶信息
    this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
      this.$message({
        type:"success",
        message:"刪除信息成功"
      })
      this.getUserInfo()  //刪除數(shù)據(jù)，更新視圖
    })
  },

5.實(shí)現(xiàn)編輯功能

在這里添加彈出框內(nèi)容和編輯彈出框內(nèi)容一模一樣，可以選擇進(jìn)行封裝，封裝成一個(gè)組件，添加和編輯共同使用這一個(gè)組件，根據(jù)自定義一個(gè)字段來(lái)判斷點(diǎn)擊 的是添加還是編輯按鈕。在本次案例中，沒(méi)有封裝，如果想封裝的話，可以自己嘗試封裝組件，來(lái)提高效率。

5.1頁(yè)面搭建EditUser.vue組件，也是當(dāng)做一個(gè)子組件，在父組件中去引入這個(gè)子組件，并把獲取的數(shù)據(jù)展示到頁(yè)面中。

<template>
 <div class="hello">
  <el-dialog title="編輯用戶信息" :visible.sync="dialogEdit.show">
   <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="form.date"
       type="date"
       placeholder="選擇日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
     <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="郵箱" prop="email">
     <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="標(biāo)題" prop="title">
     <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="評(píng)價(jià)" prop="evaluate">
     <el-input v-model="form.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="狀態(tài)" prop="state">
     <el-input v-model="form.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogEdit.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormEdit('formEdit')">確 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>

在父組件中定義好需要傳遞的數(shù)據(jù)字段

dialogAdd:{  //編輯彈出框，默認(rèn)是false
    show:false
   },
   form:{  //編輯信息
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },

5.2也是在方法中點(diǎn)擊編輯按鈕，在編輯中，點(diǎn)擊拿一行，需要獲取那一行的字段數(shù)據(jù)，并把獲取的數(shù)據(jù)傳遞給子組件顯示到彈出框中，需要肯據(jù)row，來(lái)獲取每一行的數(shù)據(jù)。

<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
 <el-button<br>
handleEdit(index,row){ //編輯
    this.dialogEdit.show = true; //顯示彈
    this.form = {
      date:row.date,
      name:row.name,
      email:row.email,
      title:row.title,
      evaluate:row.evaluate,
      state:row.state,
      id:row.id
    }
  },

當(dāng)我門(mén)打印row的是，就是點(diǎn)擊哪一行的編輯按鈕，對(duì)應(yīng)的數(shù)據(jù)就好打印出來(lái)，這時(shí)候我們只需要把得到的數(shù)據(jù)傳遞給子組件就行

5.3父組件得到的數(shù)據(jù)，子組件通過(guò)props接受，和添加數(shù)據(jù)幾乎一樣

<script>
export default {
 name: 'HelloWorld',
 props:{
  dialogEdit:Object,
  form:Object
 },
 data () {
  return {
   formrules:{
    date:[{required:true,message:"日期不能為空",trigger:"blur"}],
    name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
    email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormEdit(formEdit) {
    this.$refs[formEdit].validate((valid) => {
     if (valid) {
      this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
        this.$message({
          type:"success",
          message:"編輯信息成功"
        })
       console.log(res)
        this.dialogEdit.show = false;
        this.$emit('updateEdit')  //更新父組件數(shù)據(jù)視圖
      })
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>

6查詢數(shù)據(jù)

<el-form-item style="float: left" label="查詢用戶信息:">
 <el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></el-input>
</el-form-item>

6.1需要定義一個(gè)查詢方法，通過(guò)filter對(duì)數(shù)組進(jìn)行過(guò)濾，并返回一個(gè)新的數(shù)據(jù)，最后通過(guò)es6中includes方法，判斷查詢的條件是否包含，includes如果包含就返回true，如果不包含就返回false

searchUserinfo(keyUser) {
    return this.tableData.filter((user) => {
      if(user.name.includes(keyUser)) {
        return user
      }
    })
  }

把定義好的方法，綁定到data,因?yàn)檫@個(gè)方法會(huì)返回一個(gè)新的數(shù)組

7.時(shí)間格式化

寫(xiě)到這個(gè)案例已經(jīng)基本寫(xiě)完了，還是一些細(xì)節(jié)需要修改，比如我我們添加日期，頁(yè)面顯示并不是我們想要的。我門(mén)只想要右邊的效果.

這時(shí)候推薦一個(gè)日期格式化插件moment.js,可以快速幫我們解決這個(gè)問(wèn)題

7.1通過(guò)npm install moment --save下載

在main.js引入

import moment from 'moment'

我們定義一個(gè)全局過(guò)濾的filter,無(wú)論在那個(gè)組件都可以使用，主要調(diào)用moment

//獲取年份
Vue.filter('moment', function (value, formatString) {
  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
  return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723
});

8.全部代碼

8.1UserInfo.vue組件代碼

<template>
 <div class="info">
  <h1>用戶信息管理界面</h1>
  <el-row>
    <el-col :span="20" :push='2'>
      <div>
        <el-form :inline="true">
          <el-form-item style="float: left" label="查詢用戶信息:">
            <el-input v-model="keyUser" placeholder="查詢所需要的內(nèi)容......"></el-input>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          :data="searchUserinfo(keyUser)"
          border
          style="width: 100%">
          <el-table-column
           type="index"
           label="序號(hào)"
           align="center"
           width="60">
          </el-table-column>
          <el-table-column
           label="日期"
           align="center"
           width="120">
           <template slot-scope="scope">
            <span>{{ scope.row.date | moment}}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="姓名"
           align="center"
           width="100">
           <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="郵箱"
           align="center"
           width="160">
           <template slot-scope="scope">
            <span>{{ scope.row.email }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="標(biāo)題"
           align="center"
           width="160">
           <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="評(píng)價(jià)"
           align="center"
           width="200">
           <template slot-scope="scope">
            <span>{{ scope.row.evaluate }}</span>
           </template>
          </el-table-column>
          <el-table-column
           label="狀態(tài)"
           align="center"
           width="160">
           <template slot-scope="scope">
            <span>{{ scope.row.state }}</span>
           </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
           <template slot-scope="scope">
            <el-button
             size="mini"
             @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
            <el-button
             size="mini"
             type="danger"
             @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
           </template>
          </el-table-column>
         </el-table>
      </div>
    </el-col>
  </el-row>
  <AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
  <EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser>
 </div>
</template>
 
<script>
  import AddUser from './AddUser.vue'
  import EditUser from './EditUser.vue'
export default {
 name: 'info',
 data () {
  return {
   tableData:[],
   dialogEdit:{
    show:false,
   },
   dialogAdd:{
    show:false
   },
   keyUser:"",
   form:{  //編輯信息
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },
  }
 },
 methods:{
  getUserInfo() {
    this.$axios.get('http://localhost:3000/data').then(res => {
    console.log(res)
      this.tableData = res.data
    })
  },
  hanldeAdd(){ //添加
    this.dialogAdd.show = true;
  },
  handleEdit(index,row){ //編輯
    this.dialogEdit.show = true; //顯示彈
    this.form = {
      date:row.date,
      name:row.name,
      email:row.email,
      title:row.title,
      evaluate:row.evaluate,
      state:row.state,
      id:row.id
    }
   console.log(row)
  },
  handleDelete(index,row) {
    // 刪除用戶信息
    this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
      this.$message({
        type:"success",
        message:"刪除信息成功"
      })
      this.getUserInfo()  //刪除數(shù)據(jù)，更新視圖
    })
  },
  searchUserinfo(keyUser) {
    return this.tableData.filter((user) => {
      if(user.name.includes(keyUser)) {
        return user
      }
    })
  }
 },
 created(){
  this.getUserInfo()
 },
 components:{
  AddUser,
  EditUser
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1{
  font-size: 30px;
  color: #333;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 5px;
  border-bottom: 2px solid #409EFF;
  width: 300px
}
</style>

8.2AddUserInfo.vue組件

<template>
 <div class="hello">
  <el-dialog title="添加用戶信息" :visible.sync="dialogAdd.show">
   <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="formDate.date"
       type="date"
       placeholder="選擇日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
     <el-input v-model="formDate.name"></el-input>
    </el-form-item>
    <el-form-item label="郵箱" prop="email">
     <el-input v-model="formDate.email"></el-input>
    </el-form-item>
    <el-form-item label="標(biāo)題" prop="title">
     <el-input v-model="formDate.title"></el-input>
    </el-form-item>
    <el-form-item label="評(píng)價(jià)" prop="evaluate">
     <el-input v-model="formDate.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="狀態(tài)" prop="state">
     <el-input v-model="formDate.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAdd.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormAdd('formdong')">確 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>
 
<script>
export default {
 name: 'AddUser',
 props:{
  dialogAdd:Object
 },
 data () {
  return {
   formDate:{
    date:'',
    name:'',
    email:'',
    title:'',
    evaluate:'',
    state:''
   },
   formrules:{
    date:[{required:true,message:"日期不能為空",trigger:"blur"}],
    name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
    email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormAdd(formdong) {
    this.$refs[formdong].validate((valid) => {
     if (valid) {
      this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
        this.$message({
          type:"success",
          message:"添加信息成功"
        })
        this.dialogAdd.show = false;
        this.$emit('update');
 
      })
      this.formDate = ""
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>

8.3EditUser.vue編輯組件

<template>
 <div class="hello">
  <el-dialog title="編輯用戶信息" :visible.sync="dialogEdit.show">
   <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
    <el-form-item label="日期" prop="date">
      <el-date-picker
       v-model="form.date"
       type="date"
       placeholder="選擇日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
     <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="郵箱" prop="email">
     <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="標(biāo)題" prop="title">
     <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="評(píng)價(jià)" prop="evaluate">
     <el-input v-model="form.evaluate"></el-input>
    </el-form-item>
    <el-form-item label="狀態(tài)" prop="state">
     <el-input v-model="form.state"></el-input>
    </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
    <el-button @click="dialogEdit.show = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormEdit('formEdit')">確 定</el-button>
   </div>
  </el-dialog>
 </div>
</template>
 
<script>
export default {
 name: 'HelloWorld',
 props:{
  dialogEdit:Object,
  form:Object
 },
 data () {
  return {
   formrules:{
    date:[{required:true,message:"日期不能為空",trigger:"blur"}],
    name:[{required:true,message:"用戶名不能為空",trigger:"blur"}],
    email:[{required:true,message:"郵箱不能為空",trigger:"blur"}],
   }
  }
 },
 methods:{
  dialogFormEdit(formEdit) {
    this.$refs[formEdit].validate((valid) => {
     if (valid) {
      this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
        this.$message({
          type:"success",
          message:"編輯信息成功"
        })
       console.log(res)
        this.dialogEdit.show = false;
        this.$emit('updateEdit')
      })
     } else {
      console.log('error submit!!');
      return false;
     }
    })
  }
 }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  
</style>

以上這次全部的案例deom,在過(guò)程中有些說(shuō)的不是很好，請(qǐng)見(jiàn)諒，如果喜歡，請(qǐng)多多關(guān)注

相關(guān)文章

  • vue動(dòng)態(tài)設(shè)置路由權(quán)限的主要思路

    vue動(dòng)態(tài)設(shè)置路由權(quán)限的主要思路

    這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)設(shè)置路由權(quán)限的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-01-01
  • 基于vue hash模式微信分享#號(hào)的解決

    基于vue hash模式微信分享#號(hào)的解決

    這篇文章主要介紹了基于vue hash模式微信分享#號(hào)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue實(shí)現(xiàn)列表固定列滾動(dòng)

    vue實(shí)現(xiàn)列表固定列滾動(dòng)

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表固定列滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • Vue 搭建Vuex環(huán)境詳解

    Vue 搭建Vuex環(huán)境詳解

    這篇文章主要為大家介紹了Vue搭建Vuex環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2021-11-11
  • vue diff算法全解析

    vue diff算法全解析

    這篇文章主要介紹了vue diff算法的使用，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
    2021-04-04
  • vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法

    vue在?for?循環(huán)里使用異步調(diào)用?async/await的方法

    大家都遇到這樣的問(wèn)題,在使用函數(shù)的async/await異步調(diào)用時(shí)候,放在正常函數(shù)中單個(gè)調(diào)用時(shí)沒(méi)有問(wèn)題的,但是await放在forEach()循環(huán)里面就會(huì)報(bào)錯(cuò),本文給大家介紹vue?如何在?for?循環(huán)里面使用異步調(diào)用?async/await,感興趣的朋友一起看看吧
    2023-10-10
  • vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式

    vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式

    這篇文章主要介紹了vue中的this.$refs,this.$emit,this.$store,this.$nextTick的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼

    Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼

    這篇文章主要介紹了Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • Vue3 異步組件 suspense使用詳解

    Vue3 異步組件 suspense使用詳解

    vue在解析我們的組件時(shí)， 是通過(guò)打包成一個(gè) js 文件，當(dāng)我們的一個(gè)組件 引入過(guò)多子組件是，頁(yè)面的首屏加載時(shí)間 由最后一個(gè)組件決定 優(yōu)化的一種方式就是采用異步組件，這篇文章主要介紹了Vue3 異步組件 suspense,需要的朋友可以參考下
    2022-12-12
  • 解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明

    解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明

    本篇文章主要介紹了解讀vue生成的文件目錄結(jié)構(gòu)及說(shuō)明，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11

最新評(píng)論