Table

功能列表

- 自动分页
- 手动调整列宽
- 显示或隐藏列
- 导出表格数据到csv
- 支持静态或动态绑定数据
- 通过col.type格式化列（控件包括input, date, select, radio, checkbox, inputNumber等常用组件）

更新日志

- 优化拖动性能和手感

示图

安装方式

 <!--script引入 -->
 <script src="./neoTable.min.js"></script>
 
<!-- NPM 安装 -->
 npm install --save @neotrident/neo-table

示例

<script>
import neoTable from "@neotrident/neo-table"
export default {
  name: "App",
  components: {
    neoTable
  },
  data() {
    return {
      data: [
        {
          name: 'John Brown111',
          sex: 1,
          age: 18,
          merried: [],
          birthday: ''
        },
        {
          name: 'Jim Green',
          sex: 2,
          age: 24,
          merried: [],
          birthday: ''
        },
        {
          name: 'Joe Black',
          sex: -1,
          age: 30,
          merried: ['已婚'],
          birthday: '2019-09-25'
        },
        {
          name: 'Joe Black',
          sex: -1,
          age: 30,
          merried: ['已婚'],
          birthday: '2019-09-25'
        },
        {
          name: 'Joe Black',
          sex: -1,
          age: 30,
          merried: ['已婚'],
          birthday: '2019-09-25'
        }
      ],
      columns: [
        {
            type: 'selection',
            width: 60,
            align: 'center'
        },
        {
          title: '名称',
          slot: 'name',
          width:150
        },
        {
          title: '性别',
          slot: 'sex',
          type:'select',
          options:[{
            label: '男',
            value: 1
          },{
            label: '女',
            value: 2
          }]
        },
        {
          title: '年龄',
          slot: 'age',
          type: 'input',
          props: {
            number: true
          }
        },
        {
          title: '婚姻状况',
          slot: 'merried',
          type: 'checkbox',
          options:['已婚']
        },
        {
          title: '生日',
          slot: 'birthday',
          type: 'date',
          visible: true
        }
      ]
    }
  }
};
</script>

API

Table Props

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------ | ------------ | ------------ | | data | 表格数据源 | [Array, Function] | [] | | mapping | 远程返回的数据结构的字段映射 | Object | {rows: 'rows',total: 'total'} | | resizable | 列宽是否可手动调整 | Boolean | false | | showExport | 是否显示导出按钮 | Boolean | false | | exportOpts | 导出方法的参数 | Object | 详细用法见iview官网 | | btnsTxt | 内置的工具栏按钮名称 | Array | ['导出', '列'] | | ...props | 其余列设置，见iview官网 |

Column

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------ | ------------ | ------------ | | visible | 列的显隐 | Boolean | true | | type|列的格式化类型| String，可选input, date, select, radio, checkbox, inputNumber | - | | props | 列的props | Object | {} | | options | select, checkbox, radio等初始化数据 | Array | [] | | ...props | 其余列设置，见iview官网 |

Slot

| 属性 | 说明
| ------------ | ------------ | tool-btns | 工具栏插槽