element ui 表格動態用法--專案列子
阿新 • • 發佈:2019-01-25
<template> <div class="circuit"> <div class="circuitTitle"> <p> <img src="../../static/img/cilcro.png"> 電路列表</p> </div> <div class="rightData"> <div class="addCircuit"> <button class="add">新增</button> <div class="seleDate"> <span>時間</span> <div class="el-date"> <el-date-picker v-model="value6" type="daterange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期" size="small"> </el-date-picker> </div> </div> <div class="circuitName"> <span>電路名稱</span> <div class="selecName"> <el-select v-model="circuitName" filterable clearable placeholder="請選擇" size="small"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> </div> <div class="circuitID"> <span>電路ID</span> <div class="selectID"> <el-select v-model="circuitID" filterable clearable placeholder="請選擇" size="small"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> </div> </div> <div class="tableList"> <el-table :data="achieveCricuit" style="width:100%" border height="600" :header-cell-style="{background:'rgba(19,28,69,1)',textAlign:'center',color:'#15C2E7',fontSize:'16px',height:'60px'}" :row-style="{background:'rgba(19,28,69,1)'}" :highlight-current-row="true" size="mini" :header-row-class-name="'row-cent'" > <el-table-column fixed type="index" width="100" label="序號"> </el-table-column> <el-table-column :label="head[1]" v-for="(head, key) in header" :key="head[1]" width="120"> <template slot-scope="scope"> {{achieveCricuit[scope.$index][head[0]]}} </template> </el-table-column> <el-table-column label="操作" width="160" fixed="right"> <template slot-scope="scope"> <el-button @click.native.prevent="handleEdit(scope.$index, achieveCricuit)" type="text" size="small"> <img src="./../../static/img/edit.png"> 編輯 </el-button> <el-button @click.native.prevent="handleDelete(scope.$index, achieveCricuit)" type="text" size="small"> <img src="./../../static/img/delte.png"> 移除 </el-button> </template> </el-table-column> </el-table> </div> </div> </div> </template> <script type="text/javascript"> import store from "../store/store.js" export default { data() { return { options: [{ value: '選項1', label: '' }, { value: '選項2', label: '' }, { value: '選項3', label: '' }, { value: '選項4', label: '' }, { value: '選項5', label: '' }], header: [['Id','電路編號'], ['Sta1','地球站I'],['Sta2','地球站II'],['RF1','射頻頻率I'],['RF2','射頻頻率II'], ['Rate1','速率I'],['Rate1','速率II'],['RF1','頻寬I'],['RF2','頻寬II'],['ModType1','調製方式I'],['ModType1','調製方式II'],['Rs1','所羅門編位元速率I'],['Rs2','所羅門編位元速率II'],['Task','任務名稱'],['Type','電路型別'],['IF1','中頻頻率I'], ['IF2','中頻頻率II'],['IsSingleCarr','雙向/單向'],['TransId','轉發器ID'],['SatelliteId','衛星ID']], circuitName: '', circuitID: '', value6: '', circuitData: [{id: '01', name: 'XA-EH-01(西安/二活)', delet: '刪除'}, { id: '02', name: 'XA-EH-01(西安/二活)', delet: '刪除' }, {id: '03', name: 'XA-EH-01(西安/二活)', delet: '刪除'}] } }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { row.splice(index, 1); console.log(index, row); } }, computed: { achieveCricuit() { if (this.$store.state.circuitData) { return this.$store.state.circuitData.data; } } } } </script> <style scoped="scoped"> @import "./../../static/css/leftSideBounced.css"; .row-cent { text-align: left; } </style>