Vxe-table-plugin-renderer NPM

vxe-table-plugin-renderer

基于 vxe-table 表格的增强插件，提供一些常用的渲染器

Installing

npm install xe-utils vxe-table vxe-table-plugin-renderer

import Vue from 'vue'
import VXETable from 'vxe-table'
import VXETablePluginRenderer from 'vxe-table-plugin-renderer'
import 'vxe-table-plugin-renderer/dist/style.css'

Vue.use(VXETable)
VXETable.use(VXETablePluginRenderer)

API

XInput

XInput Props

属性	描述	类型	可选值	默认值
prefixIcon	输入框头部图标	Object	—	—
suffixIcon	输入框尾部图标	Object	—	—

XInput Event

属性	描述	参数
prefix-click	头部图标点击时会触发该方法	params, evnt
suffix-click	尾部图标点击时会触发该方法	params, evnt

XTextarea

XTextarea Props

属性	描述	类型	可选值	默认值
maxWidth	最大宽	Number	—	—
maxHeight	最大高	Number	—	—

demo

默认直接使用 class=vxe-table-x-renderer 既可，当然你也可以不引入默认样式，自行实现样式也是可以的。

<vxe-table
  border
  class="vxe-table-x-renderer"
  height="600"
  :data="tableData"
  :edit-config="{trigger: 'click', mode: 'cell'}">
  <vxe-table-column type="selection" width="60"></vxe-table-column>
  <vxe-table-column type="index" width="60"></vxe-table-column>
  <vxe-table-column prop="name" label="Name" :edit-render="{name: 'XInput'}"></vxe-table-column>
  <vxe-table-column prop="role" label="Role" :edit-render="{name: 'XTextarea'}"></vxe-table-column>
</vxe-table>

export default {
  data () {
    return {
      tableData: [
        {
          id: 100,
          name: 'test',
          age: 26,
          role: 'Develop',
        }
      ]
    }
  }
}