请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vxe-table-plugin-element: 基于 vxe-table 表格的适配插件,用于兼容 element-ui、el ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vxe-table-plugin-element

开源软件地址:

https://gitee.com/x-extends/vxe-table-plugin-element

开源软件介绍:


vxe-table-plugin-element

gitee starnpm versionnpm downloadsnpm license

基于 vxe-table 表格的适配插件,用于兼容 element-plus 组件库

Installing

npm install xe-utils vxe-table@next vxe-table-plugin-element@next element-plus
// ...import VXETable from 'vxe-table'import VXETablePluginElement from 'vxe-table-plugin-element'import 'vxe-table-plugin-element/dist/style.css'// ...VXETable.use(VXETablePluginElement)

API

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

属性描述类型可选值默认值
name支持的渲染组件StringElInput, ElAutocomplete, ElInputNumber, ElSwitch, ElRate, ElSlider, ElButton, ElButtons
attrs渲染组件附加属性,参数请查看被渲染的 Component attrsObject{}
props渲染组件附加属性,参数请查看被渲染的 Component propsObject{}
options只对 name=ElSelect 有效,下拉组件选项列表Array[]
optionProps只对 name=ElSelect 有效,下拉组件选项属性参数配置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支持的渲染组件StringElInput, ElAutocomplete, ElInputNumber, ElSelect, ElCascader, ElTimeSelect, ElTimePicker, ElDatePicker, ElSwitch, ElRate, ElSlider, ElButton, ElButtons
attrs渲染组件附加属性,参数请查看被渲染的 Component attrsObject{}
props渲染组件附加属性,参数请查看被渲染的 Component propsObject{}
options只对 name=ElSelect 有效,下拉组件选项列表Array[]
optionProps只对 name=ElSelect 有效,下拉组件选项属性参数配置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支持的渲染组件StringElInput, ElInputNumber, ElAutocomplete, ElSelect, ElDatePicker, ElSwitch, ElRate, ElSlider
attrs渲染组件附加属性,参数请查看被渲染的 Component attrsObject{}
props渲染组件附加属性,参数请查看被渲染的 Component propsObject{}
options只对 name=ElSelect 有效,下拉组件选项列表Array[]
optionProps只对 name=ElSelect 有效,下拉组件选项属性参数配置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支持的渲染组件StringElInput, ElInputNumber, ElAutocomplete, ElSelect, ElDatePicker, ElSwitch, ElRate, ElSlider, ElRadio, ElCheckbox, ElButton, ElButtons
attrs渲染组件附加属性,参数请查看被渲染的 Component attrsObject{}
props渲染组件附加属性,参数请查看被渲染的 Component propsObject{}
options只对 name=ElSelect 有效,下拉组件选项列表Array[]
optionProps只对 name=ElSelect 有效,下拉组件选项属性参数配置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

<vxe-table  height="600"  :data="tableData"  :edit-config="{trigger: 'click', mode: 'cell'}">  <vxe-column field="name" title="Name" :edit-render="{}">    <template #edit="{ row }">      <el-input v-model="row.name"></el-input>    </template>  </vxe-column>  <vxe-column field="age" title="Age" :edit-render="{}">    <template #edit="{ row }">      <el-input-number v-model="row.age"></el-input-number>    </template>  </vxe-column>  <vxe-column field="date" title="Date" width="200" :edit-render="{}">    <template #edit="{ row }">      <el-date-picker v-model="row.date" type="date"></el-date-picker>    </template>  </vxe-column></vxe-table>
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

<vxe-table  height="600"  :data="tableData">  <vxe-column field="name" title="Name"></vxe-column>  <vxe-column field="age" title="Age"></vxe-column>  <vxe-column field="date" title="Date" :filters="[{data: []}]" :filter-render="{name: 'ElDatePicker', props: {type: 'daterange'}}">    <template #filter="{ $panel, column }">      <el-input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @input="$panel.changeOption($event, !!option.data, option)"></el-input>    </template>  </vxe-column></vxe-table>
import { defineComponent } from 'vue'export default defineComponent({  setup () {    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 © 2019-present, Xu Liangzhan


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap