自定义列显隐控制

xiangpei

2024-09-03 16eb67ab6b103663d30cad9ba74360f982e131cb

 src/views/screen/components/screen-table/index.vue

@@ -6,14 +6,8 @@
    ></wrapper-title> -->
    <div class="table-content" ref="tabContent">
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          border
          :height="tableHeight"
          :max-height="tableHeight"
          class="rank-table"
        >
          <el-table-column prop="name" label="地区" align="center" width="100">
        <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
          <el-table-column prop="area" label="地区" align="center" width="100">
          </el-table-column>

          <el-table-column label="人脸设备" align="center">
@@ -22,14 +16,20 @@
                <div slot="content">
                  <div class="tip-item">
                    <div class="tip-label">设备正常数:</div>
                    <div class="tip-info tip-success">12</div>
                    <div class="tip-info tip-success">
                      {{ scope.row.faceNormalNum }}
                    </div>
                  </div>
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">4</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.faceErrorNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">75%</div>
                <div class="tip-num">
                  {{ scope.row.faceRate ? scope.row.faceRate + '%' : '--' }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
@@ -40,14 +40,20 @@
                <div slot="content">
                  <div class="tip-item">
                    <div class="tip-label">设备正常数:</div>
                    <div class="tip-info tip-success">12</div>
                    <div class="tip-info tip-success">
                      {{ scope.row.carNormalNum }}
                    </div>
                  </div>
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">4</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.carErrorNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">75%</div>
                <div class="tip-num">
                  {{ scope.row.carRate ? scope.row.carRate + '%' : '--' }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
@@ -58,14 +64,20 @@
                <div slot="content">
                  <div class="tip-item">
                    <div class="tip-label">设备正常数:</div>
                    <div class="tip-info tip-success">12</div>
                    <div class="tip-info tip-success">
                      {{ scope.row.videoNormalNum }}
                    </div>
                  </div>
                  <div class="tip-item">
                    <div class="tip-label">设备异常数:</div>
                    <div class="tip-info tip-danger">4</div>
                    <div class="tip-info tip-danger">
                      {{ scope.row.videoErrorNum }}
                    </div>
                  </div>
                </div>
                <div class="tip-num">75%</div>
                <div class="tip-num">
                  {{ scope.row.videoRate ? scope.row.videoRate + '%' : '--' }}
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
@@ -80,57 +92,62 @@

export default {
  name: "ScreenTable",

  props: {
    tableData: {
      type: Array,
      default: null,
    },
  },
  components: {
    WrapperTitle,
  },
  data() {
    return {
      tableHeight: 40,
      tableData: [
        {
          name: "富顺县",
          data1: 1123,
          data2: 1123,
          data3: 1123,
        },
        {
          name: "荣县",
          data1: 1123,
          data2: 1123,
          data3: 1123,
        },
        {
          name: "高新区",
          data1: 1123,
          data2: 1123,
          data3: 1123,
        },
        {
          name: "自流井区",
          data1: 1123,
          data2: 1123,
          data3: 1123,
        },
        {
          name: "贡井区",
          data1: 1123,
          data2: 1123,
          data3: 1123,
        },
        {
          name: "大安区",
          data1: 1123,
          data2: 1123,
          data3: 1123,
        },
        {
          name: "沿滩区",
          data1: 1123,
          data2: 1123,
          data3: 1123,
        },
      ],
      // tableData: [
      //   {
      //     name: "富顺县",
      //     data1: 1123,
      //     data2: 1123,
      //     data3: 1123,
      //   },
      //   {
      //     name: "荣县",
      //     data1: 1123,
      //     data2: 1123,
      //     data3: 1123,
      //   },
      //   {
      //     name: "高新区",
      //     data1: 1123,
      //     data2: 1123,
      //     data3: 1123,
      //   },
      //   {
      //     name: "自流井区",
      //     data1: 1123,
      //     data2: 1123,
      //     data3: 1123,
      //   },
      //   {
      //     name: "贡井区",
      //     data1: 1123,
      //     data2: 1123,
      //     data3: 1123,
      //   },
      //   {
      //     name: "大安区",
      //     data1: 1123,
      //     data2: 1123,
      //     data3: 1123,
      //   },
      //   {
      //     name: "沿滩区",
      //     data1: 1123,
      //     data2: 1123,
      //     data3: 1123,
      //   },
      // ],
    };
  },
  methods: {
@@ -201,7 +218,7 @@
  border-color: #56739e99 !important;
}

::v-deep .el-table th.el-table__cell > .cell {
::v-deep .el-table th.el-table__cell>.cell {
  color: #447ed6;
}

@@ -215,11 +232,7 @@
  background-color: transparent !important;
}

::v-deep
  .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: #447ed648;
}