https://github.com/x-extends/vxe-table-plugin-iview

🌱 基于 vxe-table 的表格适配插件，用于兼容 iview、view-design 组件库
https://github.com/x-extends/vxe-table-plugin-iview

vxe-table

Last synced: over 1 year ago
JSON representation

🌱 基于 vxe-table 的表格适配插件，用于兼容 iview、view-design 组件库

• Host: GitHub
• URL: https://github.com/x-extends/vxe-table-plugin-iview
• Owner: x-extends
• License: mit
• Created: 2019-05-06T09:26:21.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-12-03T13:23:41.000Z (over 1 year ago)
• Last Synced: 2025-03-30T07:02:25.160Z (over 1 year ago)
• Topics: vxe-table
• Language: TypeScript
• Homepage:
• Size: 657 KB
• Stars: 11
• Watchers: 1
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vxe-table-plugin-iview

[![gitee star](https://gitee.com/x-extends/vxe-table-plugin-iview/badge/star.svg?theme=dark)](https://gitee.com/x-extends/vxe-table-plugin-iview/stargazers)

[![npm version](https://img.shields.io/npm/v/vxe-table-plugin-iview.svg?style=flat-square)](https://www.npmjs.com/package/vxe-table-plugin-iview)

[![npm downloads](https://img.shields.io/npm/dm/vxe-table-plugin-iview.svg?style=flat-square)](http://npm-stat.com/charts.html?package=vxe-table-plugin-iview)

[![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)

基于 [vxe-table](https://www.npmjs.com/package/vxe-table) 表格的适配插件，用于兼容 [view-ui-plus](https://www.npmjs.com/package/view-ui-plus) 组件库

## Compatibility

对应 vxe-table v4 版本  

## Installing

```shell

npm install xe-utils vxe-table@next vxe-table-plugin-iview@next view-ui-plus

```

```javascript

// ...

import VXETable from 'vxe-table'

import VXETablePluginIView from 'vxe-table-plugin-iview'

import 'vxe-table-plugin-iview/dist/style.css'

// ...

VXETable.use(VXETablePluginIView)

```

## API

### cell-render 默认的渲染器配置项说明

| 属性 | 描述 | 类型 | 可选值 | 默认值 |

|------|------|-----|-----|-----|

| name | 支持的渲染组件 | String | Input, AutoComplete, InputNumber, Rate, iSwitch, Button, Buttons | — |

| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |

| options | 只对 name=Select 有效，下拉组件选项列表 | Array | — | [] |

| optionProps | 只对 name=Select 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |

| optionGroups | 只对 name=ElSelect 有效，下拉组件分组选项列表 | Array | — | [] |

| optionGroupProps | 只对 name=ElSelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |

| events | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |

| nativeEvents | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |

### edit-render 可编辑渲染器配置项说明

| 属性 | 描述 | 类型 | 可选值 | 默认值 |

|------|------|-----|-----|-----|

| name | 支持的渲染组件 | String | Input, AutoComplete, InputNumber, Select, Cascader, DatePicker, TimePicker, Rate, iSwitch, Button, Buttons | — |

| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |

| options | 只对 name=Select 有效，下拉组件选项列表 | Array | — | [] |

| optionProps | 只对 name=Select 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |

| optionGroups | 只对 name=ElSelect 有效，下拉组件分组选项列表 | Array | — | [] |

| optionGroupProps | 只对 name=ElSelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |

| events | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |

| nativeEvents | 渲染组件附加事件，参数为 ( {row,rowIndex,column,columnIndex}, ...Component arguments ) | Object | — | — |

### filter-render 筛选渲染器配置项说明

| 属性 | 描述 | 类型 | 可选值 | 默认值 |

|------|------|-----|-----|-----|

| name | 支持的渲染组件 | String | Input, AutoComplete, InputNumber, Select, Rate, iSwitch | — |

| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |

| options | 只对 name=Select 有效，下拉组件选项列表 | Array | — | [] |

| optionProps | 只对 name=Select 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |

| optionGroups | 只对 name=ElSelect 有效，下拉组件分组选项列表 | Array | — | [] |

| optionGroupProps | 只对 name=ElSelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |

| events | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |

| nativeEvents | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |

### item-render 表单-项渲染器配置项说明

| 属性 | 描述 | 类型 | 可选值 | 默认值 |

|------|------|-----|-----|-----|

| name | 支持的渲染组件 | String | Input, AutoComplete, InputNumber, Select, Rate, iSwitch, Radio, Checkbox, Button, Buttons | — |

| props | 渲染组件附加属性，参数请查看被渲染的 Component props | Object | — | {} |

| options | 只对 name=Select 有效，下拉组件选项列表 | Array | — | [] |

| optionProps | 只对 name=Select 有效，下拉组件选项属性参数配置 | Object | — | { value: 'value', label: 'label' } |

| optionGroups | 只对 name=ElSelect 有效，下拉组件分组选项列表 | Array | — | [] |

| optionGroupProps | 只对 name=ElSelect 有效，下拉组件分组选项属性参数配置 | Object | — | { options: 'options', label: 'label' } |

| events | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |

| nativeEvents | 渲染组件附加事件，参数为 ( {}, ...Component arguments ) | Object | — | — |

## Cell demo

```html

  

    

      

    

  

  

    

      

    

  

  

    

      

    

  

```

```javascript

export default {

  data () {

    return {

      tableData: [

        { id: 100, name: 'test0', age: 28, sex: '1', date: null },

        { id: 101, name: 'test1', age: 32, sex: '0', date: null },

        { id: 102, name: 'test2', age: 36, sex: '1', date: null }

      ]

    }

  }

}

```

## Filter demo

```html

  

  

  

    

      

    

  

```

```javascript

export default {

  data () {

    return {

      tableData: [

        { id: 100, name: 'test0', age: 28, date: null },

        { id: 101, name: 'test1', age: 32, date: null },

        { id: 102, name: 'test2', age: 36, date: null }

      ]

    }

  }

}

```

## License

[MIT](LICENSE) © 2019-present, Xu Liangzhan