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=""
                  ></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"
    >
      <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"
      >
        <template slot-scope="scope">
          <span>{{!item.render?scope.row[item.prop]:item.render(item,scope)}}</span>
        </template>
      </el-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">
        <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
          <el-checkbox
            class="selectColumnClass"
            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">
        <el-checkbox
          class="selectAllClass"
          :indeterminate="columnGroup.length > 0 && columnGroup.length < tableColumnsOrigin.length"
          v-model="selectAll"
          @change="setAll"
          >全选</el-checkbox
        >
        <el-button type="primary" @click="saveColumnEvent">保存</el-button>
      </span>
    </el-dialog>
    <c-col :span="16">
    <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">
    <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>
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
    };
  },
  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(!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>
.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;
}
.buttonDiv{
  text-align: left;
    display: inline-block;
    margin: 0;
    position: absolute;
    z-index: 999;
    right: 5px;
    padding-top: 3px;
}
</style>