saas_member/src/components/tableList.vue

<template>
  <div id="tableList">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      stripe
      style="width: 100%"
      @select-all="selectAll"
      @select="select"
      @sort-change="sortChange"
      :row-key="rowKey"
      :load="load"
      :cell-style="timeStyle"
      lazy
      :border="true"
      ref="pagerset"
      v-loading="loading"
      :row-class-name="navText.tableColor ? navText.tableColorFunc : ''"
      :header-cell-style="{
        'background-color': '#eee',
        color: '#333',
        fontSize: '14px',
      }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        v-if="navText.choiceRadio"
        align="center"
        type="selection"
        :fixed="navText.radioFixed"
        width="55"
      >
        <template slot-scope="scope">
          <el-radio
            style="margin-left: 10px"
            v-model="tableRadio"
            :label="scope.row[navText.radioKey]"
            @change="radioChange"
            >{{ "" }}</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="navText.choice"
        :reserve-selection="navText.openCheckMore"
        align="center"
        type="selection"
        width="55"
        header-align="center"
        fixed="left"
        :selectable="
          navText.selectableStatus ? navText.selectableFunc : selectFuncTrue
        "
      >
      </el-table-column>
      <el-table-column
        v-if="navText.dontNum ? false : true"
        type="index"
        :index="setIndex"
        label="序号"
        width="70"
        align="center"
        header-align="center"
      >
      </el-table-column>
      <af-table-column
        v-for="(item, index) in compTableSet(tableSet)"
        :width="item.width"
        :label="item.label"
        :align="item.dontCenter ? 'left' : 'center'"
        :sortable="item.prop === 'sort' || item.sort"
        :sort-method="sortMethods"
        :show-overflow-tooltip="item.showTooltip ? false : true"
        header-align="center"
        :prop="item.prop"
        sort-by="sort"
        :key="index"
      >
        <template slot-scope="scope">
          <div class="imgboxsq" v-if="item.scope === 'img'">
            <img
              style="height: 60px; width: 60px"
              v-if="!scope.row[item.prop]"
              src="@/assets/404_images/wuyuxaog.png"
              alt=""
            />
            <el-image
              v-else
              class="el_images"
              lazy
              :src="$methodsTools.splitImgHost(scope.row[item.prop])"
              style="height: 100%; width: 100%"
              :preview-src-list="[
                $methodsTools.splitImgHost(scope.row[item.prop]),
              ]"
              alt="加载失败"
            >
            </el-image>
          </div>
          <div v-else-if="item.scope === 'sortType'">
            <el-input-number
              v-model="scope.row[item.prop]"
              :min="0"
              style="width: 80px"
              :controls="false"
              @change="blurBackData(scope.row)"
            ></el-input-number>
          </div>
          <template
            v-else-if="
              item.scope === 'copyTime' && scope.row[item.prop] != null
            "
          >
            <div v-for="(item, index) in scope.row['copyTime']" :key="index">
              <span>{{ item }}</span>
            </div>
          </template>

          <span v-else-if="item.scope === 'sex'">
            {{
              scope.row[item.prop] == 1
                ? "男"
                : scope.row[item.prop] == 2
                ? "女"
                : "未知"
            }}
          </span>
          <span v-else-if="item.scope === 'TimeLists'"
            >{{ $methodsTools.onlyForma(scope.row[item.prop1], item.Diszing) }}
            {{ scope.row[item.prop1] ? "至" : "" }}
            {{
              $methodsTools.onlyForma(scope.row[item.prop2], item.Diszing)
            }}</span
          >
          <span v-else-if="item.scope === 'aTimeList'">{{
            scope.row[item.prop] === null
              ? "--"
              : $methodsTools.onlyForma(scope.row[item.prop], !item.isDiszing)
          }}</span>

          <span v-else-if="item.scope === 'time'">{{
            numTime(scope.row[item.prop])
          }}</span>
          <div v-else-if="item.scope === 'isOptions'">
            <template v-for="(itemt, indext) in item.options">
              <span
                :key="indext"
                v-if="itemt.value === scope.row[item.prop]"
                :style="itemt.style ? itemt.style : ''"
                >{{ itemt.label }}
                <el-button
                  type="text"
                  v-if="itemt.click"
                  @click="backFunc(scope.row)"
                  >查看</el-button
                ></span
              >
            </template>
          </div>
          <span v-else-if="item.scope === 'isgzhOpenId'">{{
            scope.row[item.prop] ? "是" : "否"
          }}</span>
          <span v-else-if="item.scope === 'InfoMore'"
            >{{ scope.row[item.prop1] }} - {{ scope.row[item.prop2] }}
          </span>
          <span v-else-if="item.scope === 'type'">
            {{ item.values[scope.row[item.prop]] }}
          </span>
          <span v-else-if="item.scope === 'peopleNums'">
            {{ scope.row[item.prop1] }} / {{ scope.row[item.prop2] }}
          </span>
          <div v-else-if="item.scope === 'solt'">
            <slot :name="item.soltName" :scope="scope"></slot>
          </div>
          <span v-else>
            {{ scope.row[item.prop] }}
            {{
              (scope.row[item.prop] || scope.row[item.prop] === 0) && item.ch
                ? item.ch
                : ""
            }}
          </span>
        </template>
      </af-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        :width="navText.changeWidth ? navText.changeWidth : '180px'"
        v-if="!navText.tableHide"
      >
        <template slot-scope="scope">
          <slot name="btn" :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: [
    "tableSets",
    "tableData",
    "navText",
    "rowKey",
    "loading",
    "objectSpanMethod",
    "setIndex",
    "radio",
  ],
  data: function () {
    return {
      tableSet: this.tableSets,
      allCheckData: [], //表格多选
      isIndeterminate: false,
      props: {
        label(data, node) {
          return data.menuName || data.name;
        },
        isLeaf(data, node) {
          return data.hasChildren ? false : true;
        },
      },
      treeDatas: [],
      treeDatas1: [],
      treeDatas2: [],
    };
  },
  computed: {
    tableRadio: {
      get() {
        return this.radio;
      },
      set(val) {
        this.$emit("update:radio", val);
      },
    },
    compTableSet: function () {
      return function (options) {
        var arrays = options.filter((item) => {
          return item.hidden !== false;
        });
        return arrays;
      };
    },
    numTime: function () {
      return function (res) {
        return Number(res / 3600).toFixed(2);
      };
    },
  },
  created() {
    this.inittableSet = JSON.stringify(this.tableSet);
    this.initTR();
  },
  methods: {
    selectFuncTrue() {
      return true;
    },
    radioChange(val) {},
    blurBackData(row) {
      this.$emit("sortFunc", row);
    },
    backFunc(row) {
      this.$emit("backFunc", row);
    },
    /**
     * 清除多选框
     */
    clearMoreActive() {
      this.allCheckData = [];
      this.$refs.pagerset.clearSelection();
    },
    openDialog(row) {
      this.$emit("openDialog", row);
    },
    sortMethods(a, b) {
      if (a.classGradeUserGoodsVoList && b.classGradeUserGoodsVoList) {
        return a.classGradeUserGoodsVoList.length >
          b.classGradeUserGoodsVoList.length
          ? -1
          : 1;
      } else {
        return a.sort > b.sort ? -1 : 1;
      }
    },
    sortChange(column) {
      this.$emit("sortChange", column);
    },
    openSpec(id) {
      this.$emit("openClassNum", id);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.treeDatas.forEach((item) => {
          if (item.type === 1) {
            item.hasChildren = true;
          }
          if (item.type === 2) {
            item.hasChildren = true;
          }
          if (item.type === 3) {
            item.hasChildren = false;
          }
        });
        return resolve(this.treeDatas);
      } else {
        if (node.data.type === 1) {
          this.$api
            .inquireCourseListmodulechapter(node.data.menuId)
            .then((res) => {
              res.data.forEach((item) => {
                item.TypeId = 2 + "-" + item.chapterId;
                item.hasChildren = true;
                item.menuId = item.chapterId;
                item.type = 2;
              });
              return resolve(res.data);
            });
        }
        if (node.data.type === 2) {
          this.$api
            .inquireCoursechaptersectionlist(node.data.menuId)
            .then((res) => {
              res.data.forEach((item) => {
                item.TypeId = 3 + "-" + item.sectionId;
                item.type = 3;
              });
              return resolve(res.data);
            });
        }
        if (node.data.type === 3) {
          return resolve([]);
        }
      }
    },
    openBoxData(row) {
      this.$emit("openBoxFun", row);
    },
    timeStyle(column) {
      if (column.columnIndex === 0 && this.navText.firstColLeft) {
        return "text-align:left!important;  padding-left: 40px;";
      }
    },
    //初始化
    initTR() {
      this.isIndeterminate = false;
      this.tableSet = [];
      this.$nextTick(() => {
        this.tableSet = JSON.parse(this.inittableSet);
      });
    },
    edit() {},
    selectAll(value) {
      this.allCheckData = value;
    },
    select(value) {
      this.allCheckData = value;
    },
    load(tree, treeNode, resolve) {
      this.$emit("load", tree, treeNode, resolve);
    },
  },
};
</script>
<style lang="less">
.el-table .info-row {
  background: #c9c9c9;
}
.open_style {
  cursor: pointer;
  color: blue;
}
.el-table .cell.el-tooltip {
  transition: all 0.3s;
}
.max-heightStyles {
  max-height: 500px;
  overflow-y: auto;
}
.overSty {
  white-space: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }

  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
  }

  &::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
  }

  &::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}
.slotPopper {
  padding: 0px !important;
}
</style>
<style lang="less" scoped>
#tableList {
  border-radius: 8px;
}
.goodsListStyle {
  cursor: pointer;
  color: blue;
}
.popoverDis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 14px;
  .checkboxHeader {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 13px;
    padding-right: 15px;
    width: 100%;
    .initbtns {
      color: #47a6ff;
      cursor: pointer;
    }
  }
  .checkboxGroup {
    display: flex;
    flex-direction: column;
    width: 100%;
    .checkboxchild {
      width: 100%;
      justify-content: space-between;
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0px 15px 0px 13px;
      transition: all 0.4s;
      &:hover {
        background-color: #ecf5ff;
      }
      &:hover .icon-right {
        display: flex;
      }
      .icon-right {
        display: flex;
        align-items: center;
        width: 30px;
        height: 30px;
        color: #666;
        font-size: 14px;
        display: none;
        i {
          cursor: pointer;
          margin: 0px 3px;
          &:hover {
            color: #47a6ff;
          }
        }
      }
    }
  }
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #666;
}
.imgboxsq {
  margin: 0 auto;
  height: 60px;
  max-height: 60px;
  .el_images {
    /deep/.el-image__inner {
      width: auto;
    }
  }
}
.imgHover {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.cvideo {
  transition: all 0.2s;
  color: #333;
  cursor: pointer;
  font-size: 30px;
}
.cvideo:hover {
  color: #47a6ff;
}
.ulAuto {
  display: flex;
  justify-content: center;
  align-items: center;
  & > ul {
    margin: 0px;
  }
}
.ulAutos {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-popover > ul {
  margin: 0px;
}
.dis_sdt {
  display: flex;
  align-items: flex-end;
  ul {
    margin: 0px;
    li {
      text-align: left;
    }
  }
}
.jumpStys {
  color: blue;
  cursor: pointer;
}
.zdyBoxStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  .zdyBtnstyle {
    padding: 4px 16px;
    border-radius: 4px;
    border: 1px solid #666;
    color: #666;
    cursor: pointer;
  }
  .goodsActiveStyle {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
}
.liSYTS {
  padding: 10px;
  margin-bottom: 16px;
  background: #eee;
  width: 96%;
}
.overBoxs {
  max-height: 500px;
  overflow-y: auto;
}
</style>