<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>
element ui 表格动态用法--项目列子
猜你喜欢
转载自blog.csdn.net/weixin_42367621/article/details/82153698
今日推荐
周排行