orbit-ch-web/src/components/tables/xqglTable_XQTB.vue

<template>
    <div class="xqgl-tableStyle">
      <!-- :data="xqglTableTBData" -->
        <el-table
            height="350"
            ref="multipleTable"
            :data="newTableXQTBData"
            tooltip-effect="light"
            style="width: 100%"
            :header-row-style="{background:'rgba(160, 160, 160, 0.3)'}"
            :header-cell-style="{padding:'0px',fontFamily: 'SourceHanSansCN-Regular',color: '#fff',backgroundColor:'transparent'}"
            :cell-style="{'padding':'0px'}"
            :row-style="{background: 'rgba(160, 160, 160, 0.3)',height:'30px'}"
            @row-click="handleClick"
            @row-contextmenu="rightClick"
            @select="handleSelection"
            @select-all="handleSelectionAll"
            >
            <el-table-column
            type="selection"
            align="center"
            width="55"
            tooltip-effect="light">
            </el-table-column>
            <el-table-column
            prop="targetName"
            label="目标"
            width="113"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="observationPurposeChinese"
            label="目的"
            width="80"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="statusChinese"
            label="状态"
            width="80"
            align="center">
            </el-table-column>
            <el-table-column
            prop="typeChinese"
            label="类型"
            width="80"
            align="center">
            </el-table-column>
            <el-table-column
            prop="parentId"
            label="编号"
            width="120"
            align="center"
            show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default{
    name:'xqglTable',
    props:["tableXQTBData"],
    data() {
      return {
        xqglTableTBData: [],
        multipleSelection: [],
        leftClickSentData:{},
        rightClickSentData:{},
      }
    },
    methods: {
      handleClick(row, column, event){
        console.log('row, column, event:',row, column, event)
        this.leftClickSentData['rowClickFlag']='1'
        this.leftClickSentData['rowData']=row
        this.$emit("getValues",this.leftClickSentData)
      },
      rightClick(row, column, event){
        console.log('row, column, event:',row, column, event)
        // event.preventDefault();

        this.rightClickSentData['row'] = row
        this.rightClickSentData['event'] = event
        this.$emit("getRightClickValue", this.rightClickSentData)
      },
      handleSelection(sel,val){
        if (sel.length > 0) {
          this.$store.dispatch("xqglClickedTargetRowForCesiumSetView",val);
        }
      },
      handleSelectionAll(val){
        if (val.length > 0) {
          this.$store.dispatch("xqglClickedTargetRowForCesiumSetView",this.tableXQTBData[0]);
        }
      }
    },
    computed:{
      newTableXQTBData(){
        let tempTableXQTBData = this.tableXQTBData;
        tempTableXQTBData.forEach(element => {
          element["observationPurposeChinese"] = "";
          element["typeChinese"] = "";
          element["statusChinese"] = "";
          if (element.observationPurpose === 1) {
            element.observationPurposeChinese = '快响应急观测';
          }
          if (element.observationPurpose === 2) {
            element.observationPurposeChinese = '陆地伪装识别';
          }
          if (element.observationPurpose === 3) {
            element.observationPurposeChinese = '早期异常监测';
          }
          if (element.observationPurpose === 4) {
            element.observationPurposeChinese = '海上搜索发现';
          }
          if (element.observationPurpose === 5) {
            element.observationPurposeChinese = '海上持续跟踪';
          }
          if (element.observationPurpose === 6) {
            element.observationPurposeChinese = '海上识别确认';
          }

          if (element.type === 0) {
            element.typeChinese = '点目标';
          }
          if (element.type === 1) {
            element.typeChinese = '移动目标';
          }
          if (element.type === 2) {
            element.typeChinese = '区域目标';
          }

          if (element.status === 0) {
            element.statusChinese = '未提交';
          }
          if (element.status === 1) {
            element.statusChinese = '已提交';
          }

        });
        // return this.tableXQTBData;
        return tempTableXQTBData;
      }
    },
    mounted() {
        // this.axios.get('/api/xqglTableTBData').then(res=>{
        //     this.xqglTableTBData = res.data.data.data;
        //     console.log(this.xqglTableTBData);
        // }).catch(err=>{
        //     alert(err)
        // })
        //后端接口

    },
}
</script>
<style lang="scss" scoped>
.xqgl-tableStyle{
    width:500px;
    height:350px;
}

//表格内部样式
/deep/.el-table {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular;
  color: #fff;
  background-color: rgba(160, 160, 160, 0.3);
}

//设置表格内容区域背景色为透明色
/deep/ .el-table,.el-table__expanded-ceel{
  background-color: transparent !important
}

//表格行与行之间存在8px的间距
::v-deep .el-table__body{
  -webkit-border-vertical-spacing:8px; //垂直间距
  // -webkit-border-horizontal-spacing:8px //水平间距
}

//设置表格区域内容背景色为透明时，出现表格底部的横线(表格外层的下边框)，以下代码可去掉该横线
/deep/ .el-table:before{
  height:0
}

//去掉表格内容的下边框--没有成功
/deep/ .el-table td,.el-table th.is-leaf{
  border:none
}

//取消鼠标滑过某行时，更改背景色
/deep/.el-table tbody tr:hover > td {
  background-color: transparent !important;
}
</style>