追求卓越一諾千金

藍藍設計-_笔头草,2011年成立__掌上彩票专业版,主創清華團隊|__芜湖地税局,專注軟件和互聯網ui設計開發||大老虎周永慷。擅長企業信息化管理_|诺基亚5320刷机、監控-|_花花公子成人网、大數據軟件UIUE谘詢和設計開發服務_-反间谍工作的主管单位是。立足UI|||邮寄包裹费用,好好學習-_-盐城杀人案,天天進步--345彩票正规吗!


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

2019-5-23 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容__云购彩票是骗局吗,每天自動發到

前言

在此之前|_主要业绩,已經實現了vue+ElementUI的跨域查詢並渲染查詢結果的功能---荣耀7plus,現在想要在每一行中添加修改和刪除的按鈕||_198彩平台正规吗。於是乎就需要獲取當前行的數據-|_乡村基网上订餐,於是就有了下麵兩種方式的獲取_-优彩娱乐平台是真的吗。


1 獲取當前行的數據

1.1 我的笨辦法

這裏是我記錄自己的學習過程-_-最新刷q币软件,這個方法也能實現__广珠轻轨网上订票,但是麻煩_||乔洋演唱会,如果您隻是為了尋找最終方案_河北保定38军,請直接查看1.2章節--_金琅。

首先我查看了官方文檔-_云联惠2018年最新消息,打算使用對話框來渲染修改頁麵和刪除警告頁麵|_定陶县教育局。這個實現起來很簡單||丁丁和杨坤后场接吻,就是對按鈕綁定一個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”*--105彩票正规吗,該方法的參數row即為當前行的數據_--3110c刷机。

在handleEdit方法中_-诺基亚5700主题下载,通過對data中的參數賦值|飞鹤航空官网,然後新增窗口中通過使用data中的參數來獲取當前行的數據|三百年女尸复活,從而實現將當前行的數據傳遞到新的對話框中_|凯旋王国官网。


這個方法雖然也能實現需求__西子书院局长成长史,但是比較麻煩--11选5投注平台:當有別的操作的時候___尊龙国际娱乐平台app,比如我再添加一個刪除操作|_至尊时时彩票平台4567,就需要在點擊刪除按鈕的時候--金寨房屋出租,獲取當前行的數據--固话积分查询,然後進行刪除操作_|_111彩票漏洞;而因為新增和刪除使用的是不同的對話框-|天目通手机维修论坛,其取值也是要通過handleEdit方法來獲取|_tksnis 009,因此_|造梦西游3极品号源,當按鈕較多_-106官网彩色版,或者當前行的字段值較多的時候--定陶教育信息网,就需要在handleEdit中對許多許多的變量進行賦值||-道光二十五酒价格,而且是對所有按鈕的所有參數__上海食草堂。這個工作量想想還是挺恐怖的||食品生产经营人员多久必须进行健康检查。


1.2 使用slot-scope獲取數據

slot-scope是屬於VUE的東東-|金色池塘自助餐,叫做插槽__天猫供销平台;至於插槽是個什麼東東|-手机直播软件哪个黄,來戳這裏_-|现任重庆市公安局局长。

在操作列__p44小游戏,對操作按鈕先用帶有slot-scope屬性的dom進行包裝|-德国thomas锅具,即可獲取當前行的數據__陈冠希张柏芝图片,具體的代碼___221稳台子,除了操作列不同外诗朗诵相信未来,還需要刪除el-table標簽中綁定的*@row-click*方法-_|诺基亚500万像素,剩下的都一樣_|传奇行会名称:


<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”>來定義當前行的數據對象-_51促销网,然後通過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>確定刪除該行數據||锈水财阀?刪除後不可恢複-18号彩票225599com!</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('確認關閉--_0368彩票?')

                   .then(_ => {

                       done();

                   })

                   .catch(_ => {});

           },

           checkDetail(val){

               console.log(val)

           }


       }

   }

</script>

<style scoped>

</style>


藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__310大赢家足球比分直播,為期望卓越的國內外企業提供卓越的UI界麵設計重庆网站建设选圣矢、BS界麵設計 _尹斗俊 孙娜恩、 cs界麵設計 _--sss355、 ipad界麵設計 --金范金素恩、 包裝設計 -_-时尚魔女网、 圖標定製 3g彩票网地址、 用戶體驗 |-四平路1931号、交互設計||众彩网接待员是什么、 網站建設 _||伯西来、平麵設計服務|__励志流行歌曲。
標簽: ElementUI表格中獲取當前行數據(實現對table數據的修改和刪除) « 官方出品_-_093彩票怎么样!揭秘阿裏巴巴APP 8.0 視覺品牌升級背後的設計思路 | QQ20周年展 | 策劃與設計執行»


訂閱Rss