Vue+Element UI彈窗實現表格編輯

點擊編輯按鈕彈出Dialog

<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><!-- 編輯時候的彈出層 --><el-dialog title="編輯用戶":visible.sync="dialogFormVisible"width="500px"top="200px"><el-form :model="form"><el-form-item label="序號":label-width="formLabelWidth"><el-input v-model="form.id"auto-complete="off"></el-input></el-form-item><el-form-item label="賬號":label-width="formLabelWidth"><el-input v-model="form.account"auto-complete="off"></el-input></el-form-item><el-form-item label="姓名":label-width="formLabelWidth"><el-input v-model="form.username"auto-complete="off"></el-input></el-form-item></el-form><div slot="footer"class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary"@click="handleSet(scope.$index, scope.row)">確 定</el-button></div></el-dialog> </template>

js如下

<script> export default {data () {return {dialogFormVisible: false,//彈出層默認為關閉//彈出層中的表單form: {account: "",username: "",id: ""},formLabelWidth: '50px'}},methods: {handleEdit (index, row) {this.dialogFormVisible = true //開啟彈出層//對彈出層中的表單賦值 this.form.account = row.accountthis.form.username = row.usernamethis.form.id = row.id},handleSet (index, row) {var params = {account: this.form.account,username: this.form.username,id: row.id}editUser('/user/editUser', params).then(res => {if (res.code === 200) {this.$message("修改成功！")}else {this.$message(res.data)}})} } </script>

時間格式化
3.1 方法一

<el-table-column label="修改時間"prop="alter_time":formatter="dataFormat"> </el-table-column><script> import moment from 'moment' export default{data(){return {},methods:{dataFormat(row,cloumn){var date=row[cloumn.property]if(date==undefined){return ''};return moment(date).format("yyyy-MM-DD HH:mm:ss")}}} } </script> 3.2 方法二 <el-form :model="form"><div class="form-header"><el-form-item v-if="form.steps != null"><div><div style="flex: 1">實驗名稱：{{form.experimentName}}</div></div><div style="display: flex"><div style="flex: 1">實驗開始時間：{{form.steps.startTime}}</div><div style="flex: 1">實驗結束時間：{{form.steps.endTime}}</div></div><div style="display: flex"><div style="flex: 1">實驗得分：{{form.steps.score }}</div><div style="flex: 1">實驗用時：{{form.steps.timeUsed | getDuration}}</div></div></el-form-item></div></el-form> // 過濾器 filters: {getDuration: function (second) {var days = Math.floor(second / 86400);var hours = Math.floor((second % 86400) / 3600);var minutes = Math.floor(((second % 86400) % 3600) / 60);var seconds = Math.floor(((second % 86400) % 3600) % 60);var duration = days + "天" + hours + "小時" + minutes + "分" + seconds + "秒";return duration;}},

總結

以上是生活随笔為你收集整理的Vue+Element UI弹窗实现表格编辑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。