utils-＞frame-＞vue-＞element-＞table组件

<!--
 <table-con
  :height="'100%'"
  :width="'100%'"
  :data="tableArr"
  :parammapping="tableParamMapping"
  :fontratio="fontRatio"
  :showoperation="true"
  :checkbigimg="true"
  :showcheck="true"
  @select="getCameraList"
  @selectall="getCameraList"
>
  <template scope="val">
    <el-button
      size="mini"
      :type="
        val.msg.good == 0 && val.msg.state == 1 ? 'primary' : 'info'
      "
      :disabled="!(val.msg.good == 0 && val.msg.state == 1)"
      @click="checkTableItrm(val.msg, val.inx)"
      >确认合格</el-button
    >
  </template>
</table-con>

this.$emit("select", selection, row);
this.$emit("selectall", selection);

import TableCon from "@/components/Table/index";


getCameraList(arrStr) {
  var _this = this;

  var page = _this.seserviceHalllimit.page;
  if (this.cameraObj[page]) {

    this.cameraObj[page] = arrStr;
  } else {
    this.cameraObj[page] = [];
    this.cameraObj[page] = arrStr;
  };

  var attributeArr = Object.keys(this.cameraObj);
  var newArr = [];

  attributeArr.forEach((v, i) => {
    newArr = newArr.concat(this.cameraObj[v])
  });

  var resultArr = this.selectedCameraArr.concat(newArr);
  // 去重
  var newarr = [];

  for (var i = 0; i < resultArr.length; i++) {
    var index = newarr.findIndex((v, index) => {
      console.log(i, resultArr[i].id, v.id)
      return v.id == resultArr[i].id
    });
    console.log('index'.index)
    if (index == -1) {
      newarr.push(resultArr[i]);
    };
  };
  this.selectedCameraArr = newarr
  this.$forceUpdate()
},
-->
<template>
  <div
    :style="{
      width: width,
      height: showscroll ? height : 'fit-content'
    }"
    :class="showscroll ? 'showscroll' : ''"
    style="overflow: hidden"
  >
    <el-table
      ref="multipleTable"
      :data="data"
      :loading="listloading"
      :style="`width: 100%;table-layout: fixed;${showscroll ? 'max-height: 100%;' : ''} `"
      class="flexColumn"
     
      :empty-text="'暂无数据'"

      :highlight-current-row="false"
      @selection-change="handleSelectionChange"
      @select="select"
      @select-all="selectAll"
      :header-row-style="{...headrowstyle}"
      :header-cell-style="{ ...headcellstyle }"
      :row-style="{ ...rowcellstyle }"
      :cell-style="{ ...cellstyle }"
      header-row-class-name=""
      header-cell-class-name=""
      :row-class-name="showhovercolor?'':'nohover'"
      cell-class-name=""
      
    >
      <el-table-column v-if="showcheck" type="selection" width="55">
      </el-table-column>
      <el-table-column
        v-for="(v, i) in parammapping"
        :key="i"
        :prop="v.prop"
        :label="v.label"
        align="center"
        :fit="false"
        :width="v.prop == 'index' ? 70 : v.width ? v.width : ''"
      >
        <template slot-scope="{ row }">
          <!--  需要插件的支持
          npm install vue-photo-preview --save
          # main.js引入
          import preview from 'vue-photo-preview'
          import 'vue-photo-preview/dist/skin.css'
          Vue.use(preview)-->
          <!-- 情况1 -->
          <img
            v-if="
              checkbigimg && v.prop == 'img' && row[v.prop] && row[v.prop] != ''
            "
            class="img"
            :preview="i"
            :src="row[v.prop]"
            style=""
          />
          <img
            v-else-if="v.prop == 'img' && row[v.prop] && row[v.prop] != ''"
            class="img"
            :src="row[v.prop]"
            style=""
          />
          <div
            v-else-if="v.prop == 'img' && !(row[v.prop] && row[v.prop] != '')"
            class="img"
            style="background-color: #efefef"
          >
            暂无图片
          </div>
          <!-- 情况2 -->
          <el-radio-group
            v-else-if="v.prop == 'radio'"
            v-model="row[v.prop].value"
            @change="changeType($event, row)"
          >
            <el-radio
              v-for="(v, i) in row[v.prop].valuemap"
              :key="i"
              :label="v.label"
              :disabled="v.disabled ? v.disabled : false"
              >{{ v.name ? v.name : v.label }}</el-radio
            >
          </el-radio-group>
          <!-- 情况3 -->
          <div v-else-if="Array.isArray(row[v.prop])">
            <div
              v-for="(subv, subi) in Math.ceil(row[v.prop].length / v.lineNum)"
              :key="subi"
              style="display: flex"
            >
              <div
                v-for="(subsubv, subsubi) in v.lineNum"
                :key="subsubi"
                style="flex: 1; overflow: hidden"
                class=""
              >
                <span
                  v-if="
                    row[v.prop].length > subv * subsubv ||
                      row[v.prop].length == subv * subsubv
                  "
                  class="link-type"
                  :class="{
                    hignLight:
                      row[v.prop][subv * subsubv - 1].color &&
                      row[v.prop][subv * subsubv - 1].color != ''
                        ? true
                        : false
                  }"
                  style="width: 100%"
                  :style="
                    `color:${
                      row[v.prop][subv * subsubv - 1].color &&
                      row[v.prop][subv * subsubv - 1].color != ''
                        ? row[v.prop][subv * subsubv - 1].color
                        : ''
                    };margin:${v.lineNum > 1 ? '0 10px;' : '0'}; ${
                      v.lineNum > 1 || (v.lineNum == 1 && !v.newLine)
                        ? 'white-space:nowrap;'
                        : ''
                    };`
                  "
                  >{{ row[v.prop][subv * subsubv - 1].name }}</span
                >
              </div>
            </div>
          </div>
          <!-- 情况4 -->
          <span
            v-else
            class="link-type"
            :class="{
              hignLight: (v.color && v.color != '') || v.clickFun ? true : false
            }"
            :style="
              `white-space:nowrap;color:${
                v.color && v.color != '' ? v.color : ''
              };${v.clickFun ? 'cursor: pointer;' : ''}`
            "
            @click="clickActive(v, row)"
            >{{ row[v.prop] }}</span
          >
        </template>
      </el-table-column>

      <el-table-column
        v-if="showoperation"
        label="操作"
        align="center"
        :fit="true"
        :width="perationwidth == 0 ? '' : perationwidth"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row, $index }" class="flexRow">
          <slot :msg="row" :inx="$index"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  mixins: [],
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },

    
    listloading: { type: Boolean, default: false },
    showoperation: {
      type: Boolean,
      default: false
    },
    perationwidth: {
      type: Number,
      default: 0
    },
    showcheck: {
      type: Boolean,
      default: false
    },
    // 允许大图
    checkbigimg: {
      type: Boolean,
      default: false
    },
    // 显示滚动条
    showscroll: {
      type: Boolean,
      default: true
    },
   
    /* ------------------------------------------------
     数据本事
    tableArr:[
      {
        index:1,
        area: "西湖区",
        totalCount: 123,
        rate: 99,
        radio:{
          value:,
          valuemap:[
            {
              label:
              name:
            }
          ]
        }
      },
      {
        index:2,
        area: "拱墅区",
        totalCount: 199,
        rate: 139
      },
      
    ],
     
     -------------------------------------------------- */
    data: {
      type: Array,
      required: true,
      default: () => {
        return [];
      }
    },
    checkedproperty: {
      type: String,
      default: "id"
    },
    checkeddata: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /* ------------------------------------------------
       tableParamMapping:[{
        prop: "index",
        label: "序号",
      
      },
      {
        prop: "area",
    
        label: "点检时间",
        width: 150,
        lineNum: 1,
        newLine:true
      },
      {
        prop: "totalCount",
        label: "营业厅名称"
      },
      {
        prop: "rate",
        label: "相似度"
      }],
     -------------------------------------------------- */
    parammapping: {
      type: Array,

      required: true,
      default: () => {
        return [];
      }
    },
    headrowstyle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    headcellstyle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rowcellstyle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    cellstyle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showhovercolor: {
      type: Boolean,
     default: false
    },
  },
  data() {
    return {};
  },
  watch: {
    data: {
      deep: true,
      handler(val) {
        this.toggleSelection(this.checkeddata);
      }
    },
    checkeddata: {
      deep: true,
      handler(val) {
        // var filterArr = this.data.filter((v, i) => {});
        this.toggleSelection(val);
      }
    },
    listloading: {
      deep: true,
      handler(val) {
        console.log("listloading", val);
      }
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.calcHeightx();
    })
    
  },
  beforeDestroy() {},
  methods: {
    //
    toggleSelection(rows) {
      var _this = this;
      _this.$refs.multipleTable.clearSelection();
      this.$nextTick().then(function() {
        if (rows) {
          rows.forEach(row => {
            var index = _this.data.findIndex((v, i) => {
              return row[_this.checkedproperty] == v[_this.checkedproperty];
            });

            if (index != -1) {
              _this.$refs.multipleTable.toggleRowSelection(_this.data[index]);
            }
          });
        } else {
          _this.$refs.multipleTable.clearSelection();
        }
      });
    },
    handleSelectionChange(val) {},
    select(selection, row) {
      selection = selection.filter(Boolean);
      this.$emit("select", selection, row);
    },
    selectAll(selection) {
      this.$emit("selectall", selection);
    },
    // tadio事件-------------------------------
    changeType(type, row) {
      this.$emit("changetype", type, row);
    },
    // row点击事件-------------------------------
    clickActive(v, row) {
      console.log("MapObj属性:", v, "\nrow数据:", row, "\nemit");
      this.$emit(v.clickFun, row);
    },
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    //                               工具函数
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

    calcHeightx() {
      //通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
      let header = window.document.getElementsByClassName("el-table__header-wrapper");
      if(header.length>0){
        
        header[0].style.minHeight=window.document.getElementsByClassName("el-table__header")[0]
        .clientHeight+'px'
      };
  
    }
  }
};
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.hignLight {
  font-family: MicrosoftYaHei;
  font-size: 16px;
  letter-spacing: 0;
  text-align: justify;
}
.img {
  line-height: 80px;
  text-align: center;
  margin: 0 auto;
  width: 100px;
  height: 80px;
}

/* table本身 ------------------------------------------------------------------*/


.el-table{
  background:transparent;
}
// table右侧白线
.el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent;
}

// 除了头部row的底部白线
::v-deep .el-table th.is-leaf, 
::v-deep  .el-table td {
  border-bottom: 0px solid #dfe6ec;
}
// 包括头部row的右部白线
::v-deep .el-table--border th,
::v-deep .el-table--border td {
  border-right: 0px solid #dfe6ec;
}
::v-deep  .el-table--enable-row-hover .el-table__body .nohover:hover > td {
    background-color: transparent;
}
/* el-radio-group 组件 ------------------------------------------------------------------*/
::v-deep .el-radio-group {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-radio {
    margin-right: 10px;
  }
  .el-radio:last-child {
    margin-right: 0px;
  }
}
::v-deep .el-table--group,
.el-table--border {
  border: 0px solid #dfe6ec;
}
/* 滚动条 -----------------------------------------------------------------*/
::v-deep .el-table__header-wrapper {
  // min-height: 37px;
  height: fit-content;
  overflow: hidden;
}
.showscroll ::v-deep .el-table__body-wrapper {
  overflow-y: auto !important;
}
// ::v-deep  .el-table__body-wrapper {
//     overflow-y: auto !important;
// }
::v-deep .el-table__body-wrapper {
  flex: 1;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
/*正常情况下滑块的样式*/

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #29acfe;
  border-radius: 10px;
  // -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在该类指向的控件上时滑块的样式*/

::v-deep .el-table__body-wrapper:hover::-webkit-scrollbar-thumb {
  // background-color: rgba(0, 0, 0, .2);
  // border-radius: 10px;
  // -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮在滑块上时滑块的样式*/

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  // background-color: rgba(0, 0, 0, .4);
  // -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*正常时候的主干部分*/

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0);
  background-color: transparent;
}
/*鼠标悬浮在滚动条上的主干部分*/

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track:hover {
  // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
}
</style>

<style lang="scss" scoped></style>