vue-table-module/README.md

表格组件，支持合并单元格，表格滚动，自定义单元格显示内容

# 简介

表格组件，支持合并单元格，表格滚动，自定义单元格显示内容

# 安装

```
npm install vue-table-module
```

# 注册

在 main.js中引入并注册

```
import Vue from 'vue'
import App from './App.vue'
import VueTableModule from 'vue-table-module'
import 'vue-table-module/vue-table-module.css'

Vue.use(VueTableModule)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```

# 使用

## 一、基础用法

```
<template>
  <div style="width: 200px;height: 200px;">
    <vue-table
      :tableData="tableData"
      :tableColums="tableColums"
     />
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          grade: '一年级',
          class: '一班',
          name: '王小虎',
          nativePlace: '重庆',
        },
        {
          grade: '一年级',
          class: '一班',
          name: '李晓红',
          nativePlace: '四川',
        },
      ], // 必传  表格数据
      tableColum: [
        {
          name: '年级', // 必传   列名称
          code: 'grade', // 必传   列code
          align: 'center', // 可选  对齐方式 默认左对齐 left 可选值 left/center/right
          width: '100px', // 可选  对应列的宽度
          minWidth: '60px', // 可选  对应列的最小宽度
	  showOverflowTooltip: true, // 可选 当内容过长被隐藏时显示 tooltip
          render: (row, column, $index) => {
            // row 行数据
            // 列数据
            // 行的索引
            return row.date
          }, // 可选  自定义单元格渲染
        },
        {
          name: '班级',
          code: 'class'
        },
        {
          name: '姓名',
          code: 'name'
        },
        {
          name: '籍贯',
          code: 'nativePlace',
        },
      ], // 必传  表格列配置数据
    }
  }
}
</script>
```

## 二、样式配置

### 序号、表格滚动、边框

hasIndex  是否显示序号 默认false不显示

hasIndexStyle  序号样式 默认false

indexName 序号列名称 默认序号

styleType 表格样式 默认line 可选值（line、border）

isScroll 表格是否滚动 默认false不滚动

scrollOptions 表格滚动参数配置

```

<template>
  <div style="width: 200px;height: 200px;">
    <vue-table
      :hasIndex="true"
      :hasIndexStyle="true"
      indexName="排名"
      :tableData="tableData"
      :tableColums="tableColums"
      :isScroll="true"
      styleType="border"
     />
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          grade: '一年级',
          class: '一班',
          name: '王小虎',
          nativePlace: '重庆',
        },
        {
          grade: '一年级',
          class: '一班',
          name: '李晓红',
          nativePlace: '四川',
        },
      ], // 必传  表格数据
      tableColums: [
        {
          name: '年级', // 必传   列名称
          code: 'grade', // 必传   列code
          align: 'center', // 可选  对齐方式 默认左对齐 left
          width: '100px', // 可选  对应列的宽度
          minWidth: '60px', // 可选  对应列的最小宽度
	  showOverflowTooltip: true, // 可选 当内容过长被隐藏时显示 tooltip
        },
        {
          name: '班级',
          code: 'class'
        },
        {
          name: '姓名',
          code: 'name'
        },
        {
          name: '籍贯',
          code: 'nativePlace',
        },
      ], // 必传  表格列配置数据
      scrollOptions: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }, // 可选  表格滚动参数配置
    }
  }
}
</script>
```

## 三、功能

### 1、合并单元格

rowSpanCodeList  合并行配置

columnSpanCodeList 合并列配置

```
<template>
  <div style="width: 200px;height: 200px;">
    <vue-table
      :tableData="tableData"
      :tableColums="tableColums"
      :rowSpanCodeList="rowSpanCodeList"
      :columnSpanCodeList="columnSpanCodeList"
     />
  </div>
</template>
<script>
export default {
  data() {
    return {
      rowSpanCodeList: ['grade', 'class',], // 可选  需要合并行的code 
      columnSpanCodeList: [
        ['nativePlace', 'address'],
        ['chinese', 'math']
      ], // 可选 需要合并列的code
      tableData: [
        {
          grade: '一年级',
          class: '一班',
          name: '王小虎',
          nativePlace: '重庆',
          address: '重庆',
          chinese: '通过',
          math: '通过',
        },
        {
          grade: '一年级',
          class: '一班',
          name: '李晓红',
          nativePlace: '四川',
          address: '重庆',
          chinese: '否',
          math: '通过',
        },
      ], // 必传  表格数据
      tableColums: [
        {
          name: '年级', // 必传   列名称
          code: 'grade', // 必传   列code
        },
        {
          name: '班级',
          code: 'class'
        },
        {
          name: '姓名',
          code: 'name'
        },
        {
          name: '籍贯',
          code: 'nativePlace',
        },
        {
          name: '现住址',
          code: 'address'
        },
        {
          name: '语文',
          code: 'chinese',
          align: 'center'
        },
        {
          name: '数学',
          code: 'math'
        },
        {
          name: '备注',
          code: 'remark',
        },
        {
          name: '操作',
          code: 'operation',
        },
      ], // 必传  表格列配置数据
    }
  }
}
</script>
```

### 2、自定义单元格显示内容

通过具名插槽的方式自定义单元格显示内容

插槽名称为列code

插槽可接收参数 row, column, $index

row  行数据

column 列数据

$index 行的索引

```
<template>
  <div style="width: 200px;height: 200px;">
    <vue-table
      :tableData="tableData"
      :tableColums="tableColums"
    >
      <div slot="name" slot-scope="{row, column, $index}">
        <div v-if="$index === 0" style="color: rgb(204, 112, 20);">
          {{ row[column.property] }}
        </div>
        <div v-else>{{ row[column.property] }}</div>
      </div>
      <div slot="remark" slot-scope="{row, column}">
        <el-input size="mini" v-model="row[column.property]" placeholder="请输入"></el-input>
       </div>
       <div slot="operation">
         <el-button type="text">编辑</el-button>
       </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          grade: '一年级',
          class: '一班',
          name: '王小虎',
          nativePlace: '重庆',
          address: '重庆',
          chinese: '通过',
          math: '通过',
        },
        {
          grade: '一年级',
          class: '一班',
          name: '李晓红',
          nativePlace: '四川',
          address: '重庆',
          chinese: '否',
          math: '通过',
        },
      ], // 必传  表格数据
      tableColums: [
        {
          name: '年级', // 必传   列名称
          code: 'grade', // 必传   列code
        },
        {
          name: '班级',
          code: 'class'
        },
        {
          name: '姓名',
          code: 'name'
        },
        {
          name: '籍贯',
          code: 'nativePlace',
        },
        {
          name: '现住址',
          code: 'address'
        },
        {
          name: '语文',
          code: 'chinese',
          align: 'center'
        },
        {
          name: '数学',
          code: 'math'
        },
        {
          name: '备注',
          code: 'remark',
        },
        {
          name: '操作',
          code: 'operation',
        },
      ], // 必传  表格列配置数据
    }
  }
}
</script>
```