ElementUI實現點選radio,展開擴充套件欄
阿新 • • 發佈：2019-01-20
問題：
之前一直用的iview的table元件庫，雖然確實介面風格比較好看，但好多功能、特性尚未完全實現，在實現部分複雜功能時，存在一定的問題，用自定義元件+命令修改也能實現部分功能，但效果並不是很好。特此，還是使用elementui來實現這部分功能。
效果：
程式碼：
<template> <div class="base_info"> <Row> <Col> <el-table ref="table000" :data="pagerData.data" :row-key="pagerData.data.Id" style="width: 100%" border :expand-row-keys="pagerData.data._expanded"> <el-table-column type="expand" width="1"> <template slot-scope="props"> <Card title='資訊' style="margin: 0em auto;text-align: left;"> <!-- 這裡本來是繼續用element的寫法，但看起來確實不如iview好看，就把前面的iview寫法的程式碼拿了過來 --> <Row> <Col span="4" class="border_css column_singleline_label"> <font class="column_font">xxxx:</font> </Col> <Col span="8" class="border_css column_singleline_value"> <Input style="width: 320px;" v-model="props.row.Bean.1" placeholder="xxxx"></Input> </Col> <Col span="4" class="border_css column_singleline_label"> <font class="column_font">xxxxxx:</font> </Col> <Col span="8" class="border_css column_singleline_value"> <Input style="width: 200px;" v-model="props.row.Bean.2" placeholder="xxx"></Input> </Col> </Row> <Row> <Col span="4" class="border_css column_singleline_label"> <font class="column_font">xxx:</font> </Col> <Col span="8" class="border_css column_singleline_value"> <Select v-model="props.row.Bean.3" style="width:160px"> <Option v-for="level in levelList" :value="level.value" :key="level.value">{{ level.label }}</Option> </Select> </Col> <Col span="4" class="border_css column_singleline_label"> <font class="column_font">xxxxx:</font> </Col> <Col span="8" class="border_css column_singleline_value"> <Select style="width:160px"> <Option v-for="level in levelList" :value="level.value" :key="level.value">{{ level.label }}</Option> </Select> </Col> </Row> <Row> <Col span="4" class="border_css column_singleline_label"> <font class="column_font">xxxxx:</font> </Col> <Col span="8" class="border_css column_singleline_value"> <DatePicker style="width:160px;" v-model="props.row.Bean.Time" type="date" placeholder="時間"></DatePicker> </Col> <Col span="4" class="border_css column_singleline_label"> <font class="column_font">xxxxx:</font> </Col> <Col span="8" class="border_css column_singleline_value"> <InputNumber :max="100000000" v-model="props.row.Bean.Money" :formatter="value => `¥ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')" :parser="value => value.replace(/$s?|(,*)/g, '')"></InputNumber> </Col> </Row> <Row> <Col span="20" class="border_css" style="height: 96px;line-height: 96px;text-align: -webkit-right;background-color: lightblue;"> <Row> <Col span="4" class="border_css" style="height: 96px;line-height: 96px;text-align: center;background-color: lightblue;"> <font style="font-family: PingFang SC;font-size: 1.5em;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap;">情況</font> <!-- <Button></Button> --> <!-- 上傳圖片控制元件 需除錯，需回撥 --> </Col> <Col span="20" class="border_css" style="height: 96px;line-height: 96px;text-align: center;background-color: ghostwhite;"> <!-- 圖片顯示區域 --> </Col> </Row> </Col> <Col span="4" class="border_css" style="height: 96px;line-height: 96px;background-color: ghostwhite;"> <Row> <Col class="border_css" style="height: 48px;line-height: 48px;text-align: center;background-color: lightblue;"> <font class="column_font">xxxx</font> </Col> </Row> <Row> <Col class="border_css" style="height: 48px;line-height: 48px;text-align: center;background-color: ghostwhite;"> <!--<font class="column_font">雙笙</font>--> <Input style="width: 200px;" v-model="props.row.Bean.Person" placeholder="xxxxx"></Input> </Col> </Row> </Col> </Row> </Card> </template> </el-table-column> <el-table-column label="序號" width="120" prop="Id"> </el-table-column> <el-table-column label="專案" fit="false" width="240" prop="Item"> </el-table-column> <el-table-column label="內容" prop="Content"> </el-table-column> <el-table-column label="是否符合" width="240"> <template slot-scope="scope"> <el-radio-group v-model="scope.row._expanded" @change="handleExpanded($event,scope.row,scope.$index)"> <el-radio label="true">符合</el-radio> <el-radio label="false">不符合</el-radio> <!-- _expanded true 符合 不展開 false 不符合 展開 --> </el-radio-group> </template> </el-table-column> </el-table> </Col> </Row> <div style="width: 100%;height: 120px;background-color: ghostwhite;margin-top: 32px;"> <Button type="primary" size="large" @click="save()">儲存</Button> <Button type="default" size="large" @click="back()">返回</Button> </div> </div> </template> <script> export default{ components: { }, props:{ }, data(){ return{ levelList: [ { value: '0', label: 'a' }, { value: '1', label: 's' }, { value: '2', label: 'd' } ], typeList: [ { value: 'all', label: 'w' } ], pagerData:{ data:[ ], page:{ //分頁數 arrPageSize:[10,20,30,40], //分頁大小 pageSize:10, //總分頁數 pageCount:1, //當前頁面 pageCurrent:1, //總數 totalCount:80 } }, submitData:[] } }, mounted(){ console.log("SecondDayCheck -- created") //用來實現巢狀物件在 Content-Type = application/x-www-form-urlencoded 報錯的解決方案 /* var params = new URLSearchParams(); params.append('Id', '1'); params.append('Bean.Type', '0');*/ this.$axios({ method:"post", url: this.server + "/Content", data:JSON.stringify({ Id : 1, Bean : { Type : 0 } }), headers:{ /*'Content-Type': 'application/x-www-form-urlencoded'*/ 'Content-Type': 'application/json' } }) .then(res=>{ let obj = JSON.parse(res.data.data);//.reverse(); for(var i in obj){ obj[i]._expanded = 'true' obj[i].Bean = { Id: '',//......部分欄位未顯示 Money: 0, //資金 Person: '' // }; } this.pagerData.data = obj }); }, methods:{ save : function () { this.submitData.splice(0,this.submitData.length) this.$Message.info('Clicked 儲存'); for(var i in this.pagerData.data){ if(this.pagerData.data[i]._expanded === 'false'){ this.submitData.push(this.pagerData.data[i] } } this.$axios({ method:"post", url: this.server + "/Content", data: JSON.stringify(this.submitData), headers:{ //'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'application/json' } }) .then(res=>{ }); }, back : function () { this.$Message.info('Clicked 返回'); }, RowExpansion : function(row,expanded){ }, handleExpanded : function(event,row,index){ if(row._expanded === 'false'){ this.$refs.table000.toggleRowExpansion(row,true); }else{ this.$refs.table000.toggleRowExpansion(row,false); } } } } </script> <style> .base_info{ margin-top: 20px; overflow-y: auto; } .border_css{ border: 1px solid black; } .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } .column_singleline_label{ height: 48px; line-height: 48px; text-align: -webkit-right; background-color: lightblue; } .column_singleline_value{ height: 48px; line-height: 48px; background-color: ghostwhite; padding-left: 1em; } .column_doubleline_label{ height: 96px; line-height: 96px; text-align: -webkit-right; background-color: lightblue; } .column_doubleline_value{ height: 96px; line-height: 96px; background-color: ghostwhite; padding-left: 1em; } .column_font{ font-family: PingFang SC; font-size: 1.5em; margin-right: 1em; } </style>
程式碼比較混亂，見諒！
解釋：
1初始化的過程，用axios從後臺傳回來程式碼，對其遍歷，先新增_expanded屬性。
2然後，點選radio觸發handleExpanded事件，通過ref標籤控制擴充套件欄的擴充套件與否
關鍵點：
1 :row-key
用來確保擴充套件欄和table row對應
2 toggleRowExpansion
該方法是table methods，作用在table上，通過ref引用table，來操作