element ui 表格动态用法--项目列子

<template>
  <div class="circuit">
    <div class="circuitTitle">
      <p>&nbsp;<img src="../../static/img/cilcro.png">&nbsp;电路列表</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">&nbsp;&nbsp;编辑
              </el-button>
              <el-button
                @click.native.prevent="handleDelete(scope.$index, achieveCricuit)"
                type="text"
                size="small">
                <img src="./../../static/img/delte.png">&nbsp;&nbsp;移除
              </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>