2019-5-23 seo達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到
前言
在此之前，已經(jīng)實(shí)現(xiàn)了vue+ElementUI的跨域查詢并渲染查詢結(jié)果的功能，現(xiàn)在想要在每一行中添加修改和刪除的按鈕。于是乎就需要獲取當(dāng)前行的數(shù)據(jù)，于是就有了下面兩種方式的獲取。
1 獲取當(dāng)前行的數(shù)據(jù)
1.1 我的笨辦法
這里是我記錄自己的學(xué)習(xí)過程，這個(gè)方法也能實(shí)現(xiàn)，但是麻煩，如果您只是為了尋找最終方案，請(qǐng)直接查看1.2章節(jié)。
首先我查看了官方文檔，打算使用對(duì)話框來渲染修改頁面和刪除警告頁面。這個(gè)實(shí)現(xiàn)起來很簡單，就是對(duì)按鈕綁定一個(gè)click事件，然后控制對(duì)話框的顯示和隱藏：
<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="序號(hào)">
</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="編輯當(dāng)前行" 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><!--這個(gè)只是為了在頁面上顯示間隔-->
<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標(biāo)簽上綁定了行單擊事件*@row-click=“handleEdit”*，該方法的參數(shù)row即為當(dāng)前行的數(shù)據(jù)。
在handleEdit方法中，通過對(duì)data中的參數(shù)賦值，然后新增窗口中通過使用data中的參數(shù)來獲取當(dāng)前行的數(shù)據(jù)，從而實(shí)現(xiàn)將當(dāng)前行的數(shù)據(jù)傳遞到新的對(duì)話框中。
這個(gè)方法雖然也能實(shí)現(xiàn)需求，但是比較麻煩：當(dāng)有別的操作的時(shí)候，比如我再添加一個(gè)刪除操作，就需要在點(diǎn)擊刪除按鈕的時(shí)候，獲取當(dāng)前行的數(shù)據(jù)，然后進(jìn)行刪除操作；而因?yàn)樾略龊蛣h除使用的是不同的對(duì)話框，其取值也是要通過handleEdit方法來獲取，因此，當(dāng)按鈕較多，或者當(dāng)前行的字段值較多的時(shí)候，就需要在handleEdit中對(duì)許多許多的變量進(jìn)行賦值，而且是對(duì)所有按鈕的所有參數(shù)。這個(gè)工作量想想還是挺恐怖的。
1.2 使用slot-scope獲取數(shù)據(jù)
slot-scope是屬于VUE的東東，叫做插槽；至于插槽是個(gè)什么東東，來戳這里。
在操作列，對(duì)操作按鈕先用帶有slot-scope屬性的dom進(jìn)行包裝，即可獲取當(dāng)前行的數(shù)據(jù)，具體的代碼，除了操作列不同外，還需要?jiǎng)h除el-table標(biāo)簽中綁定的*@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”>來定義當(dāng)前行的數(shù)據(jù)對(duì)象，然后通過scope.row來獲取當(dāng)前行的數(shù)據(jù)。
全部代碼
<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="謎底字?jǐn)?shù)">
<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="序號(hào)">
</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="編輯當(dāng)前行" 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="刪除當(dāng)前行" 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>
請(qǐng)求失敗！
</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>確定刪除該行數(shù)據(jù)？刪除后不可恢復(fù)！</strong></span></h1>
<el-form>
<el-form-item label="當(dāng)前行數(shù)據(jù)">
<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, // 每頁的數(shù)據(jù)
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) //每頁下拉顯示數(shù)據(jù)
},
handleCurrentChange(currentPage) {
this.dengmiQueryForm.currentPage = currentPage;
console.log(this.dengmiQueryForm.currentPage) //點(diǎn)擊第幾頁
},
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('確認(rèn)關(guān)閉？')
.then(_ => {
done();
})
.catch(_ => {});
},
checkDetail(val){
console.log(val)
}
}
}
</script>
<style scoped>
</style>
藍(lán)藍(lán)設(shè)計(jì)( www.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ocunn.cn