js封装el-table组件并使用

js封装el-table 组件并使用

注：该项目是在html页面中引入vue.js 来使用vue的

需求：
（1）表头可点击
（2）表格样式
（3）合并单元格

组件代码如下：

Vue.component('datareport-component', {
  props: {
    title: "",  // 报表名称
    reportlistdata: [], // 表格数据
    tableid: "", // 表格id
    columns: [], // 表格列内容
    items: [],  // 表格可点击表头的列内容
    fontweight: [], // 字体加粗的行的索引号(从0开始)
    fontindent: []  // 缩进的行的索引号(从0开始)
  },

  template: `<div>
                <div class="title">{{title}}</div>
                <el-table :data="reportlistdata" border style="width: 100%" height="700" :row-style="rowStyle"
                        :header-cell-style="headerStyle" :cell-style="cellStyle" :span-method="objectSpanMethod"
                        :id="tableid">
                        <template v-for="(item,index) in columns">
                            <el-table-column :fixed="item.fixed" :width="item.width" :prop="item.prop" :label="item.label"
                                :align="item.align">
                            </el-table-column>
                        </template>
                        <template v-for="(item,index) in items">
                            <el-table-column :prop="item.prop" :width="item.width" :align="item.align">
                                <template slot="header" slot-scope="scope">
                                    <span @click="seeDetail(item.url)" class="header">
                                        <span>{{item.label}}</span>
                                        <i class="iconfont icon-dayuhao"></i>
                                    </span>
                                </template>
                            </el-table-column>
                        </template>
                    </el-table>
              </div>`,

  data: function () {
    return {
      headerStyle: {},
      rowStyle: {},
      mergeSpanArr: [], // 空数组，记录每一行的合并数
      mergeSpanArrIndex: '', // mergeSpanArr的索引
    }
  },
  methods: {
    // row,  每一行上的数据
    // column, 每一列上的数据
    // rowIndex,  行数的下标从0开始
    // columnIndex   列数下标从0开始
    cellStyle({ row, column, rowIndex, columnIndex }) {
      var styleStr = '';
      // 设置第一二列的样式（背景色）
      if (columnIndex == 0 || columnIndex == 1) {
        styleStr += 'background:#f7f8fc;'
      }
      // 设置除前三列以外没有border
      if (columnIndex != 0 && columnIndex != 1 && columnIndex != 2) {
        styleStr += 'border-left:none;border-right:none'
      }
      // 设置第二列单元格字体样式
      if (columnIndex == 1) {
        for (var i = 0; i < this.fontweight.length; i++) {
          if (rowIndex == this.fontweight[i]) {
            styleStr += 'font-weight:700;'
          }
        }
        this.fontindent.forEach(function (value) {
          for (val in value) {
            // console.log(value[val])
            for (var i = 0; i < value.value.length; i++) {
              if (rowIndex == value.value[i]) {
                if (value.key == "2") {
                  styleStr += 'text-indent:2em;'
                } if (value.key == "4") {
                  styleStr += 'text-indent:4em;'
                } if (value.key == "6") {
                  styleStr += 'text-indent:6em;'
                } if (value.key == "8") {
                  styleStr += 'text-indent:8em;'
                }
              }
            }
          }
        });
      }
      return styleStr;
    },
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 设置需要合并的列（索引）
        const _row = this.mergeSpanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 生成一个与行数相同的数组，记录每一行设置的合并数
    // data 表格数据  str 合并的属性（数组中重复的属性）
    setMergeArr(data, str) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.mergeSpanArr.push(1);
          this.mergeSpanArrIndex = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][str] === data[i - 1][str]) {
            this.mergeSpanArr[this.mergeSpanArrIndex] += 1;
            this.mergeSpanArr.push(0);
          } else {
            this.mergeSpanArr.push(1);
            this.mergeSpanArrIndex = i;
          }
        }
      }
      // 如果第一条记录索引为0，向数组中push 1，设置索引值
      // 如果不是第一条记录，判断与前一条记录是否相等，相等则向mergeSpanArr添加元素0
      // 且将前一条记录+1，即需要合并的行数+1，直到得到所有需要合并的行数
    },
    // 点击表头事件
    seeDetail(url) {
      console.log("seeDetail" + url);
      if (url != undefined) {
        window.open(url)
      }
    }
  },
  created: function () {
    // 设置表头样式
    this.headerStyle = { background: '#EDF0F6', color: '#333' };
    // 设置行高
    this.rowStyle = { height: '38px' };
  },
  mounted() {
    this.setMergeArr(this.reportlistdata, "category")
  }
});

在html文件中引入该js即可使用组件

 <script type="text/javascript" src="../../components/dataReport-component.js"></script>

使用：

<datareport-component tableid="out_table" :title="title1" :reportlistdata="reportListData"
                        :columns="columns" :items="items" :fontweight="fontWeight" :fontindent="fontIndent">
</datareport-component>

最后在js文件中，将上面的变量赋值即可