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

<template>
    <div class="xqglTable-XQListTable">
        <div class="xqglTable-content">
            <el-table
            height="190"
            :data="xqglXQListTable"
            style="width: 100%"
            tooltip-effect="light"
            :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'}"
            >
                <!-- <el-table-column
                    prop="needname"
                    label="需求名"
                    width="80"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="needcode"
                    label="需求编号"
                    width="120"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="targername"
                    label="目标名"
                    width="80"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="purpose"
                    label="目的"
                    width="80"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="starttime"
                    label="开始时间"
                    width="140"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="endtime"
                    label="结束时间"
                    width="140"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="prioritylevel"
                    label="优先级"
                    width="70"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    width="80"
                    align="center">
                </el-table-column> -->

                <el-table-column
                    prop="targetName"
                    label="需求名"
                    width="80"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="parentId"
                    label="需求编号"
                    width="120"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="targetName"
                    label="目标名"
                    width="80"
                    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="startTimeString"
                    label="开始时间"
                    width="140"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="endTimeString"
                    label="结束时间"
                    width="140"
                    align="center"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="priority"
                    label="优先级"
                    width="70"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="statusChinese"
                    label="状态"
                    width="80"
                    align="center">
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>
<script>
import {getClickedTagetListDataForxqlbTB} from '@/api/api.js'
export default{
    name:'XQListTable',
    data() {
      return {
        //总数据
        xqglXQListTable: [],

      }
    },
    methods:{
        getData(){
          getClickedTagetListDataForxqlbTB().then(res => {
            // console.log("需求筹划页面，所有需求列表数据:",res.resp);
            var getAllXQData = res.resp;
            getAllXQData.forEach(element => {
                if (!element.observationPurposeChinese) {
                    element["observationPurposeChinese"] = "";
                }
                if (!element.statusChinese) {
                    element["statusChinese"] = "";
                }
                if (!element.endTimeString) {
                    element["endTimeString"] = "";
                }
                // element.endTimeString = this.commonFunction.timeStampToStringtime(element.endTime * 1000);
                element.endTimeString = element.endTime;
                if (!element.startTimeString) {
                    element["startTimeString"] = "";
                }
                // element.startTimeString = this.commonFunction.timeStampToStringtime(element.startTime * 1000);
                element.startTimeString = element.startTime;
                var purposeChinese = element.observationPurpose;
                switch(purposeChinese){
                    case 1:
                        element.observationPurposeChinese = "快响应急观测";
                        break;
                    case 2:
                        element.observationPurposeChinese = "陆地伪装识别";
                        break;
                    case 3:
                        element.observationPurposeChinese = "早期异常监测";
                        break;
                    case 4:
                        element.observationPurposeChinese = "海上搜索发现";
                        break;
                    case 5:
                        element.observationPurposeChinese = "海上持续跟踪";
                        break;
                    case 6:
                        element.observationPurposeChinese = "海上识别确认";
                        break;
                    // default:
                    //     element.observationPurposeChinese = "";
                }
                switch(element.status){
                    case 0:
                        element.statusChinese = "未提交";
                        break;
                    case 1:
                        element.statusChinese = "已提交";
                        break;
                    case 2:
                        element.statusChinese = "已筹划";
                        break;
                    // default:
                    //     element.observationPurposeChinese = "";
                }
            });
            // console.log("翻译，时间转换之后：",getAllXQData);
            this.xqglXQListTable = getAllXQData;
          });
        },
    },
    mounted() {
        // this.xqglXQListTable = this.mockData.mockData.xqglXQListTableData;
        this.getData();

    },
}
</script>
<style lang="scss" scoped>
.xqglTable-XQListTable{
  width: 100%;
  height: 100%;
    .xqglTable-content{
      width: 100%;
      height: 100%;
    }
}

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

//设置表格内容区域背景色为透明色
/deep/ .el-table, /deep/ .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>