Element Table 自定义表格横向展示

效果预览

支持自定义：展示列数

超出多行时：隐藏多余格子

使用方式

1. npm安装方式

npm 包地址： https://www.npmjs.com/package/wenkil-transverse-table

npm i wenkil-transverse-table

项目中需要使用以下方式引入element-ui和样式

<template>
  <div class="app-container">
    <TransverseTable ref="transverseTable"  :tableData="[
            {key:'test',value: 1},
            {key:'test',value: 1},
            {key:'test',value: 1},
            {key:'test',value: 1},
            {key:'test',value: 1},
            {key:'test',value: 1},


          ]"></TransverseTable>
  </div>
</template>


<script>
  import Element from "element-ui";
  import 'element-ui/lib/theme-chalk/index.css';
  import TransverseTable from 'wenkil-transverse-table'
  export default {
    name: "test",
    components: {TransverseTable},
    data() {
      return {}
    },
    created() {

    },
    mounted() {
      this.$refs.transverseTable.setTable()
    },
    methods: {},
  }
</script>


<style scoped>


</style>

2. 组件方式

在项目里自定义组件目录,写入以下代码

<template>
  <div>
    <el-table
      border
      :data="tableList"
      :show-header="false"
      :cell-style="cellStyle"
    >
      <el-table-column
        min-width="50"
        v-for="item in headList"
        :key="item.prop"
        :label="item.prop"
        :prop="item.prop"
        align="center"
      >
        <template slot-scope="{ row }">
          <span>{{ row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
  export default {
    components: {},
    props: {
      tableData: { //传进key value格式的数组
        type: Array,
        default: () => {
          return []
        }
      },
      columnNum: {
        type: Number,
        default: 6
      }
    },


    data() {
      return {
        tableList: [],
        headList: [],
      }
    },
    created() {


    },
    mounted() {


    },
    methods: {
      setTable() {
        this.tableList = []
        this.headList = []
        for (let i = 0; i < this.columnNum; i++) {
          this.headList.push(
            {prop: 'key' + (i + 1)},
            {prop: 'value' + (i + 1)}
          )
        }


        var newArr = [];


        for (var i = 0; i < this.tableData.length; i += this.columnNum) {
          let temp = this.tableData.slice(i, i + this.columnNum)
          if (temp.length < this.columnNum) {
            let d = temp.length
            for (let i = 0; i < this.columnNum - d; i++) {
              temp.push({
                key:undefined,
                value:undefined
              })
            }
          }
          newArr.push(temp);
        }


        let tempArr = []
        for (let i = 0; i < newArr.length; i++) {
          let index = 1
          let temp = {}
          for (let item of newArr[i]) {
            temp['key' + index] = item.key
            temp['value' + index] = item.value
            index++
          }
          tempArr.push(temp)
        }


        this.tableList = tempArr
      },


      cellStyle({row, column, rowIndex, columnIndex}) {
        if (row[column.property] != 0 && !row[column.property]) {
          return {
            visibility: 'hidden'
          }
        }
        if (columnIndex % 2 == 0) {
          return {
            background: '#f0f0f0'
          }
        }
      }
    },
  }
</script>

<style scoped>
  /deep/ .el-table--group::after, .el-table--border::after, .el-table::before {
    width: 0;
    border: none !important;
    background-color: transparent !important;
  }
</style>

使用时：

import TransverseTable from "@/components/TransverseTable";

components:{TransverseTable}


<transverse-table
  ref="transverseTable"
  :columnNum="4"
  :tableData="[
  {key:'测试',value: 1},
  {key:'测试',value: 1},
  {key:'测试',value: 1},
  {key:'测试',value: 1},
  {key:'测试',value: 1},
  {key:'测试',value: 1},
  {key:'测试',value: 1},
  {key:'测试',value: 1},]">
</transverse-table>


在父组件里,动态获取数据时需要调用下this.$refs.transverseTable.setTable() 来渲染数据