IStreamTable.vue

<template>
  <div class="eContainer-table-block">
    <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"
    >
      <el-table-column
        type="selection"
        width="55"
        v-if="showSelection"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column
        v-for="(item, key) in tableColumns"
        :key="key"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
      </el-table-column>
      <slot></slot>
    </el-table>
    <c-col :span="16">
    <el-pagination
      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">
    <div class="paginationLable">
      当前显示第 {{ (currentPage - 1) * pageSize + 1 }}-{{
        currentPage * pageSize > tableData.length
          ? tableData.length
          : currentPage * pageSize
      }}
      条，共 {{ tableData.length }} 条
    </div>
    </c-col>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    tableColumns() {
      const columnArr = [];
      const lines = this.columns;
      const etyReg = /\"([^\"]*)\"/;
      const obj = {};
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        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',
          });
        }
      }
      for (const k in obj) {
        if (Object.hasOwnProperty.call(obj, k)) {
          const o = obj[k];
          const tableColumn = o.map((item) => item.prop).join("\n");
          columnArr.push({
            prop: tableColumn,
            label: tableColumn,
            width: o[0].width,
            // width: "auto",
            index: k,
            children: o,
          });
        }
      }
      return columnArr.sort((a, b) => {
        return parseInt(a.index) - parseInt(b.index);
      });
    },
    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);
      }
      return arr;
    },
  },
  data() {
    return {
      currentPage: 1,
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 10,
    };
  },
  methods: {
    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);
    },
  },
};
</script>

<style>
.eContainer-table-block {
  margin-top: 15px;
}
.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;
}

.eContainer-table-block .el-table .cell {
  white-space: pre-wrap;
}
</style>