99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

ElementUI表格中獲取當前行數據（實現對table數據的修改和刪除）

2019-5-23 seo達人

如果您想訂閱本博客內容，每天自動發到

前言

在此之前，已經實現了vue+ElementUI的跨域查詢并渲染查詢結果的功能，現在想要在每一行中添加修改和刪除的按鈕。于是乎就需要獲取當前行的數據，于是就有了下面兩種方式的獲取。

1 獲取當前行的數據

1.1 我的笨辦法

這里是我記錄自己的學習過程，這個方法也能實現，但是麻煩，如果您只是為了尋找最終方案，請直接查看1.2章節。

首先我查看了官方文檔，打算使用對話框來渲染修改頁面和刪除警告頁面。這個實現起來很簡單，就是對按鈕綁定一個click事件，然后控制對話框的顯示和隱藏：

<el-table @row-click="handleEdit" :data="dengmiQueryForm.list" stripe border width="100%" height="350">

<el-table-column prop="mimian" label="謎面" width="300" fixed="left">

</el-table-column>

<el-table-column prop="dengmiSeq" label="序號">

</el-table-column>

<el-table-column prop="mimu" label="謎目">

</el-table-column>

<el-table-column prop="mige" label="謎格">

</el-table-column>

<el-table-column prop="midi" label="謎底">

</el-table-column>

<el-table-column prop="zuozhe" label="作者">

</el-table-column>

<el-table-column prop="mizhu" label="注">

</el-table-column>

<el-table-column prop="shangxi" label="賞析">

</el-table-column>

<el-table-column prop="leixing" label="類型">

</el-table-column>

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

<el-col :span="10">

<el-tooltip effect="dark" content="編輯當前行" placement="top">

<el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">編輯</el-button>

</el-tooltip>

</el-col>

</el-table-column>

</el-table>

<div style="margin-top: 5px;"></div>

<el-dialog title="編輯燈謎" :visible.sync="dengmiQueryForm.dialogVisible">

<el-form :model="modifyForm">

<el-form-item label="謎面" :label-width="modifyForm.formLabelWidth">

<el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>

</el-form-item>

<el-form-item label="謎目" :label-width="modifyForm.formLabelWidth">

<el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">

<el-button @click="dengmiQueryForm.dialogVisible = false">取消</el-button>

<el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">確定</el-button>

</div>

</el-dialog>

<script>

export default {

name: "dengmiQuery",

comments: {

DengmiModify

},

data() {

return {

modifyForm:{

formLabelWidth:'120px',

mimian:'',

mimu:''

},

dengmiQueryForm: {

dialogDeleteVisible:false,

dialogVisible: false,

list: []

}

};

},

methods: {

submitForm(formName) {

console.log(formName.mimu);

this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {

console.log("This request is succeed! Here is the response:");

this.dengmiQueryForm.list = success.body.result;

this.dengmiQueryForm.requestResult = true;

}, function (error) {

console.log("This request is failed! Here is the response:");

console.log(error);

this.dengmiQueryForm.requestResult = false;

})

},

handleEdit(row) {

this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;

this.modifyForm.mimian=row.mimian;

this.modifyForm.mimu=row.mimu;

}

}

}

</script>

如上代碼，是在el-table標簽上綁定了行單擊事件*@row-click=“handleEdit”*，該方法的參數row即為當前行的數據。

在handleEdit方法中，通過對data中的參數賦值，然后新增窗口中通過使用data中的參數來獲取當前行的數據，從而實現將當前行的數據傳遞到新的對話框中。

這個方法雖然也能實現需求，但是比較麻煩：當有別的操作的時候，比如我再添加一個刪除操作，就需要在點擊刪除按鈕的時候，獲取當前行的數據，然后進行刪除操作；而因為新增和刪除使用的是不同的對話框，其取值也是要通過handleEdit方法來獲取，因此，當按鈕較多，或者當前行的字段值較多的時候，就需要在handleEdit中對許多許多的變量進行賦值，而且是對所有按鈕的所有參數。這個工作量想想還是挺恐怖的。

1.2 使用slot-scope獲取數據

slot-scope是屬于VUE的東東，叫做插槽；至于插槽是個什么東東，來戳這里。

在操作列，對操作按鈕先用帶有slot-scope屬性的dom進行包裝，即可獲取當前行的數據，具體的代碼，除了操作列不同外，還需要刪除el-table標簽中綁定的*@row-click*方法，剩下的都一樣：

<el-table-column label="操作嘗試2">

<template slot-scope="scope">

<el-button type="text" @click="checkDetail(scope.row)">查看詳情</el-button>

</template>

</el-table-column>

<script>

export default {

name: "dengmiQuery",

data() {

return {

modifyForm:{

formLabelWidth:'120px',

mimian:'',

mimu:''

},

dengmiQueryForm: {

dialogVisible: false,

list: [],

}

};

},

methods: {

checkDetail(val){

console.log(val)

}

}

}

</script>

通過<template slot-scope=“scope”>來定義當前行的數據對象，然后通過scope.row來獲取當前行的數據。

全部代碼

<template>

<div>

<el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">

<el-row>

<el-col span="8">

<el-form-item label="謎面">

<el-input v-model="dengmiQueryForm.mimian"></el-input>

</el-form-item>

</el-col>

<el-col span="8">

<el-form-item label="謎目">

<el-input v-model="dengmiQueryForm.mimu"></el-input>

</el-form-item>

</el-col>

<el-col span="8">

<el-form-item label="謎格">

<el-input v-model="dengmiQueryForm.mige"></el-input>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col span="8">

<el-form-item label="謎底">

<el-input v-model="dengmiQueryForm.midi"></el-input>

</el-form-item>

</el-col>

<el-col span="8">

<el-form-item label="作者">

<el-input v-model="dengmiQueryForm.zuozhe"></el-input>

</el-form-item>

</el-col>

<el-col span="8">

<el-form-item label="謎底字數">

<el-input v-model="dengmiQueryForm.midiLength"></el-input>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col>

<el-button type="primary" @click="submitForm" icon="el-icon-search">查詢</el-button>

<el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>

</el-col>

</el-row>

</el-form>

<el-header></el-header>

<div v-if="dengmiQueryForm.requestResult">

<el-table :data="dengmiQueryForm.list.slice((dengmiQueryForm.currentPage-1)*dengmiQueryForm.pagesize,dengmiQueryForm.currentPage*dengmiQueryForm.pagesize)"

stripe border width="100%" height="350">

<el-table-column type="index" fixed="left"></el-table-column>

<el-table-column prop="mimian" label="謎面" width="300" fixed="left">

</el-table-column>

<el-table-column prop="dengmiSeq" label="序號">

</el-table-column>

<el-table-column prop="mimu" label="謎目">

</el-table-column>

<el-table-column prop="mige" label="謎格">

</el-table-column>

<el-table-column prop="midi" label="謎底">

</el-table-column>

<el-table-column prop="zuozhe" label="作者">

</el-table-column>

<el-table-column prop="mizhu" label="注">

</el-table-column>

<el-table-column prop="shangxi" label="賞析">

</el-table-column>

<el-table-column prop="leixing" label="類型">

</el-table-column>

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

<el-row>

<el-col :span="10">

<el-tooltip effect="dark" content="編輯當前行" placement="top">

<el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">編輯</el-button>

</el-tooltip>

</el-col>

<el-col :span="10">

<el-tooltip effect="light" content="刪除當前行" placement="top">

<el-button size="mini" @click="dengmiQueryForm.dialogDeleteVisible = true" type="danger" plain>刪除</el-button>

</el-tooltip>

</el-col>

</el-row>

</el-table-column>

<el-table-column label="操作嘗試2">

<template slot-scope="scope">

<el-button type="text" @click="checkDetail(scope.row)">查看詳情</el-button>

</template>

</el-table-column>

</el-table>

<div style="margin-top: 5px;"></div>

<el-pagination

prev-text="上一頁"

next-text="下一頁"

background

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:current-page="dengmiQueryForm.currentPageA"

:page-sizes="[5,10,50,100]"

:page-size="5"

layout="total, sizes, prev, pager, next, jumper"

:total="dengmiQueryForm.list.length">

</el-pagination>

</div>

<div v-else>

請求失敗！

</div>

<el-dialog title="編輯燈謎" :visible.sync="dengmiQueryForm.dialogVisible">

<el-form :model="modifyForm">

<el-form-item label="謎面" :label-width="modifyForm.formLabelWidth">

<el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>

</el-form-item>

<el-form-item label="謎目" :label-width="modifyForm.formLabelWidth">

<el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">

<el-button @click="dengmiQueryForm.dialogVisible = false">取消</el-button>

<el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">確定</el-button>

</div>

</el-dialog>

<el-dialog title="刪除燈謎" :visible.sync="dengmiQueryForm.dialogDeleteVisible">

<h1><span style="color: red"><strong>確定刪除該行數據？刪除后不可恢復！</strong></span></h1>

<el-form>

<el-form-item label="當前行數據">

<el-col :span="18">

<el-input v-model="dengmiQueryForm.deleteShow" readonly></el-input>

</el-col>

</el-form-item>

</el-form>

<div slot="footer" class="dialog-footer">

<el-button @click="dengmiQueryForm.dialogDeleteVisible = false">取消</el-button>

<el-button type="primary" @click="dengmiQueryForm.dialogDeleteVisible = false">確定</el-button>

</div>

</el-dialog>

</div>

</template>

<script>

export default {

name: "dengmiQuery",

data() {

return {

modifyForm:{

formLabelWidth:'120px',

mimian:'',

mimu:''

},

dengmiQueryForm: {

deleteShow:'',

dialogDeleteVisible:false,

dialogVisible: false,

currentRow: null,

visibleA: false,

currentPage: 1, //初始頁

pagesize: 5, // 每頁的數據

currentPageA: 1,

mimian: '',

mimu: '',

mige: '',

midi: '',

zuozhe: '',

midiLength: '',

list: [],

requestResult: true,

thisRowData:{}

}

};

},

methods: {

submitForm(formName) {

console.log(formName.mimu);

this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {

console.log("This request is succeed! Here is the response:");

this.dengmiQueryForm.list = success.body.result;

this.dengmiQueryForm.requestResult = true;

}, function (error) {

console.log("This request is failed! Here is the response:");

console.log(error);

this.dengmiQueryForm.requestResult = false;

})

},

resetForm(formName) {

this.$refs[formName].resetFields();

},

handleSizeChange(size) {

this.dengmiQueryForm.pagesize = size;

console.log(this.dengmiQueryForm.pagesize) //每頁下拉顯示數據

},

handleCurrentChange(currentPage) {

this.dengmiQueryForm.currentPage = currentPage;

console.log(this.dengmiQueryForm.currentPage) //點擊第幾頁

},

handleEdit(row) {

this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;

// this.dengmiQueryForm.currentRow = row;

console.log(this.dengmiQueryForm.deleteShow);

this.modifyForm.mimian=row.mimian;

this.modifyForm.mimu=row.mimu;

// console.log("event=" + event);

// console.log(colunm)

},

handleClose(done) {

this.$confirm('確認關閉？')

.then(_ => {

done();

})

.catch(_ => {});

},

checkDetail(val){

console.log(val)

}

}

}

</script>

<style scoped>

</style>

藍藍設計( www.lapeinture.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。