IStreamTable.vue

<template>
  <div class="eContainer-table-block">
    <div style="text-align: left" v-if="showButtonFlg" class="buttonDiv">
      <c-button
        icon="el-icon-s-tools"
        @click="clounmSetting"
        style="margin-right: 20px;margin-top: 10px;"
      ></c-button>
    </div>
    <el-table
      ref="table"
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%"
      class="eContainer-table"
      @selection-change="handleSelectionChange"
      :row-key="getRowKey"
      :header-cell-style="{
        background: 'rgb(235, 235, 235)',
        color: 'rgb(51, 51, 51)',
      }"
      :highlight-current-row="true"
      @row-click="rowClick"
      :border="true"
      max-height="380"
    >
      <el-table-column
        type="selection"
        width="55"
        v-if="showSelection"
        :reserve-selection="true"
      ></el-table-column>

      <c-table-column
        v-for="(item, key) in tableColumns"
        :key="key"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        sortable
      >
        <template v-slot="{ scope }">
          <!-- <template slot-scope="{ scope }"> -->
          <span>{{
            !item.render ? scope.row[item.prop] : item.render(item, scope)
          }}</span>
        </template>
      </c-table-column>
      <slot></slot>
    </el-table>

    <el-dialog
      class="showColumnDialog"
      :visible.sync="setColumnFlg"
      :title="'自定义列属性'"
      appenD-to-body
      v-if="showButtonFlg"
    >
      <el-form-item label-width="0" style="display: flex;
    align-items: center;">
        <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
          <el-checkbox
            class="selectColumnClass checkbox-left"
            style="margin-right:45px;"
            v-for="item in tableColumnsOrigin"
            :key="item.label"
            :label="parseInt(item.index)"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <span slot="footer" style="display: flex;
    align-items: center;">
        <el-checkbox
          class="selectAllClass checkbox-left"
          :indeterminate="
            columnGroup.length > 0 &&
            columnGroup.length < tableColumnsOrigin.length
          "
          v-model="selectAll"
          @change="setAll"
          >全选</el-checkbox
        >
        <el-button type="primary" @click="saveColumnEvent" style="margin-left:10px;">保存</el-button>
      </span>
    </el-dialog>
    <c-col :span="16" v-if="tableData.length>10">
      <el-pagination
        v-if="paginationShow"
        class="eContainer-pagination"
        layout="prev, pager, next, jumper"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="tableData.length"
        @size-change="sizeChange"
        @current-change="currentChange"
      ></el-pagination>
    </c-col>
    <c-col :span="8" style="float:right">
      <div class="paginationLable" v-if="paginationShow">
        当前显示第 {{ (currentPage - 1) * pageSize + 1 }}-{{
          currentPage * pageSize > tableData.length
            ? tableData.length
            : currentPage * pageSize
        }}
        条，共 {{ tableData.length }} 条
      </div>
    </c-col>
  </div>
</template>


<script>
import CodeTable from "~/config/CodeTable";

export default {
  props: {
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    paginationShow: {
      type: Boolean,
      required: false,
      default: true,
    },
    showButtonFlg: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  watch: {
    columns() {
      this.generateColumns();
    },
  },
  computed: {
    tableData() {
      // return this.list.map((row) => {
      // 	const res = {}
      //   const vals = row.split("\t");
      // 	for (let i = 0; i < vals.length; i++) {
      // 		res[`${i}`] = vals[i];
      // 	}
      // 	return res;
      // });
      const arr = [];
      for (let i = 0; i < this.list.length; i++) {
        const d = this.list[i];
        const items = d.split("\t");
        const it = {};
        for (let j = 0; j < this.tableColumns.length; j++) {
          const column = this.tableColumns[j];
          it[column["prop"]] = column.children
            .map((c) => items[c["idx"]] || " ")
            .join("\n");
        }
        it["IDX"] = i;
        it["INR"] = items[0];
        if (it["INR"].length < 8) {
          it["INR"] = items[1];
        }
        it.srcStr = d;
        arr.push(it);
      }
      this.currentPage = 1;
      return arr;
    },
  },
  data() {
    return {
      tableColumnsOrigin: [],
      tableColumns: [],
      currentPage: 1,
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 10,
      selectAll: true,
      columnGroup: [],
      setColumnFlg: false,
      codes: {
        ...CodeTable,
      },
    };
  },
  mounted() {
    this.generateColumns();
  },
  methods: {
    generateColumns() {
      const columnArr = [];
      const lines = this.columns;
      const etyReg = /\"([^\"]*)\"/;
      const obj = {};
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        if (typeof line === "object") {
          //如果是对象，支持自定义处理
          //{width,position,index,label,pattern,render}
          let { width, position, index, label, pattern, render, ...rest } =
            line;
          position += "";
          if (!obj[position]) {
            obj[position] = [];
          }
          obj[position].push({
            idx: index,
            prop: label,
            // width:width+'px',
            width: width === "auto" ? width : width + "px",
            pattern,
            render,
            ...rest,
          });
          continue;
        }
        if (etyReg.test(line)) {
          const gs = line.match(etyReg);
          const columnName = gs[1];
          const newLine = line.replace(gs[0], "_");
          const colPropArr = newLine.split(" ");
          const positionArr = colPropArr[1].split(":");
          if (!obj[positionArr[0]]) {
            obj[positionArr[0]] = [];
          }
          obj[positionArr[0]].push({
            idx: colPropArr[0],
            prop: columnName,
            // width: colPropArr[3] + 'px',
            width:
              colPropArr[3] === "auto" ? colPropArr[3] : colPropArr[3] + "px",
          });
        }
      }
      for (const k in obj) {
        if (Object.hasOwnProperty.call(obj, k)) {
          const o = obj[k];
          const tableColumn = o.map((item) => item.prop).join("\n");
          let colInfo = {
            prop: tableColumn,
            label: tableColumn,
            width: o[0].width,
            // width: "auto",
            index: k,
            children: o,
          };
          //支持自定义处理
          if (o.length == 1) {
            if (o[0].pattern && this[o[0].pattern]) {
              colInfo.render = this[o[0].pattern];
              colInfo.code = o[0].code;
            } else if (o[0].render) {
              colInfo.render = o[0].render;
            }
          }
          columnArr.push(colInfo);
        }
      }
      const arr = columnArr.sort((a, b) => {
        return parseInt(a.index) - parseInt(b.index);
      });
      this.tableColumnsOrigin = arr;
      this.tableColumns = arr;
      this.columnGroup = arr.map((item) => parseInt(item.index));
      return arr;
    },
    sizeChange(size) {
      this.pageSize = size;
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleSelectionChange(val) {
      this.$emit("multipleSelect", this.getSelectedRowIndex(val));
    },
    getRowKey(row) {
      return row["IDX"];
    },
    getSelectedRowIndex(val) {
      const indexArr = [];
      for (let j = 0; j < val.length; j++) {
        const v = val[j];
        for (let i = 0; i < this.tableData.length; i++) {
          const data = this.tableData[i];
          if (v["IDX"] === data["IDX"]) {
            indexArr.push(i);
          }
        }
      }
      return indexArr;
    },
    // 行点击，设置高亮
    rowClick(row, column, event) {
      this.$refs.table.setCurrentRow(row);
      this.$emit("chooseRowEvent", row);
    },
    clounmSetting() {
      this.setColumnFlg = true;
    },
    saveColumnEvent() {
      this.setColumnFlg = false;
      const arr = this.columnGroup.map((idx) => parseInt(idx));
      arr.sort((a, b) => a - b);
      this.columnGroup = arr;
      this.tableColumns = this.columnGroup.map(
        (index) => this.tableColumnsOrigin[parseInt(index) - 1]
      );
    },
    setAll(val) {
      this.columnGroup = val
        ? this.tableColumnsOrigin.map((item) => parseInt(item.index))
        : [];
    },
    handleColumnChange() {
      this.selectAll =
        this.tableColumnsOrigin.length === this.columnGroup.length;
    },

    //补充自定义列处理函数
    //去掉日期的时分秒毫秒
    date(item, scope) {
      let value = scope.row[item.prop];
      if (!value) {
        return "";
      }
      let idx = value.indexOf(" ");
      if (idx > 0) return value.substring(0, idx);
      return value;
    },
    //code映射
    code(item, scope) {
      let value = scope.row[item.prop];
      let code = item.code;
      if (typeof code == "string") {
        code = this.codes[code];
      }
      if (!value || !code) {
        return "";
      }
      let em = code.find((item) => item.value.trim() == value.trim());
      if (!em) {
        return value;
      }
      return em.label;
    },
    //去掉时间的毫秒
    time(item, scope) {
      let value = scope.row[item.prop];
      if (!value) {
        return "";
      }
      let idx = value.indexOf(".");
      if (idx > 0) return value.substring(0, idx);
      return value;
    },
    //日期格式化
    dateFormat(item, scope) {
      let value = scope.row[item.prop];
      if (!value) {
        return "";
      }
      return (
        value.substring(0, 4) +
        "-" +
        value.substring(4, 6) +
        "-" +
        value.substring(6)
      );
    },
  },
};
</script>

<style scoped>
.eContainer-table-block {
  margin-top: 15px;
  position: relative;
}
.eContainer-table-block .paginationLable {
  font-size: 12px;
  color: #808080;
  height: 26px;
  line-height: 26px;
  float: right;
  /* margin-top: 20px; */
}
.eContainer-table-block .el-table__body-wrapper {
  overflow: auto;
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.selectColumnClass .el-checkbox__label {
  width: 67px;
  font-size: 13px;
}
.selectAllClass .el-checkbox__label {
  width: 30px;
  font-size: 13px;
  padding-left: 5px;
}
.eContainer-table-block >>> .el-table .cell {
  white-space: pre-wrap;
}
.eContainer-table-block >>> .el-dialog .el-dialog__footer {
  display: flex;
    justify-content: center;
}
.buttonDiv {
  text-align: left;
  display: inline-block;
  margin: 0;
  margin-top: -3px;
  position: absolute;
  z-index: 999;
  right: 5px;
  padding-top: 3px;
}
</style>