contrast-table

A Vue plugin

Usage no npm install needed!

<script type="module">
  import contrastTable from 'https://cdn.skypack.dev/contrast-table';
</script>

README

contrast-table

contrast-table是基于 Element-UI Table 组件封装的高阶表格组件,可无缝支持 element 的 table 组件。

开发

npm install

npm run dev

npm run build

使用

安装 Element:

npm i element-ui -S

安装 contrast-table:

npm i contrast-table -S

局部引入contrastTable

import contrastTable from 'contrastTable'
components: {
  contrastTable
}

contrast-table在elements ui table上做了封装,专门用于数据对比(竖型)表格,接收后端返回的常见对象格式,参见tableData contrast-table支持多列数据对比,支持定制表头,传入tableFields字段即可

<template>
  <div id="app">
    <contrast-table :tableData="tableData" :tableFields="tableFields"></contrast-table>
  </div>
</template>

<script>
import contrastTable from 'contrast-table'
export default {
  name: 'app',
  components: {
    contrastTable
  },
  data () {
    return {
      tableData: {
        zd1: ['字段一', 'aaa', 'bbb'],
        zd2: ['字段二', 'ccc', 'hhh'],
        zd3: ['字段三', 'fsadf', 'sdfsdffsdg']
      },
      tableFields: ['第一列数据', '第二列数据']
    }
  }
}
</script>

<style lang="scss">

</style>