mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
1 line
74 KiB
JavaScript
1 line
74 KiB
JavaScript
(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["start"],{"0653":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 内容渲染器 "),n("table-column-api-link",{attrs:{prop:"content-render"}}),e._v("，查看 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/examples/plugins/xtable/renderer"}},[e._v("示例的源码")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" renderExpand (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ row, rowIndex, column, columnIndex, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 展开内容"),n("br")],1),n("vxe-table",{attrs:{border:"",resizable:"","empty-render":{name:"NotData"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{type:"expand",width:"80","content-render":{name:"MyExpand"}}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[],demoCodes:["\n // 创建一个展开内容渲染器\n VXETable.renderer.add('MyExpand', {\n renderExpand (h, renderOpts, params) {\n const { row } = params\n return [\n <ul>\n <li>\n <span>ID：</span>\n <span>{ row.id }</span>\n </li>\n <li>\n <span>Name：</span>\n <span>{ row.name }</span>\n </li>\n <li>\n <span>UpdateTime：</span>\n <span>{ row.updateTime }</span>\n </li>\n <li>\n <span>CreateTime：</span>\n <span>{ row.createTime }</span>\n </li>\n </ul>\n ]\n }\n })\n ",'\n <vxe-table\n border\n resizable\n :empty-render="{name: \'NotData\'}"\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column type="expand" width="80" :content-render="{name: \'MyExpand\'}"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"0aa1":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Theme 主题")]),n("p",{staticClass:"tip"},[e._v("Case 1.使用默认的主题样式"),n("br"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-custom-theme",target:"_blank"}},[e._v("项目示例")])]),n("pre",[e._v(" "),n("code",{staticClass:"scss"},[e._v("\n @import 'vxe-table/lib/index.css';\n ")]),e._v("\n ")]),n("p",{staticClass:"tip"},[e._v("Case 2.修改主题颜色，并引入所有样式（"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/blob/master/styles/variable.scss",target:"_blank"}},[e._v("查看所有变量")]),e._v("）"),n("br"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-custom-theme",target:"_blank"}},[e._v("项目示例")])]),n("pre",[e._v(" "),n("code",{staticClass:"scss"},[e._v("\n @import 'vxe-table/styles/variable.scss';\n\n // 局部修改变量\n $vxe-font-size: 14px;\n $vxe-font-color: #666;\n $vxe-primary-color: #409eff;\n\n @import 'vxe-table/styles/default.scss';\n ")]),e._v("\n ")]),n("p",{staticClass:"tip"},[e._v("Case 3.修改主题颜色，并按需引入样式（"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/blob/master/styles/variable.scss",target:"_blank"}},[e._v("查看所有变量")]),e._v("）"),n("br"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-custom-theme",target:"_blank"}},[e._v("项目示例")])]),n("pre",[e._v(" "),n("code",{staticClass:"scss"},[e._v("\n @import 'vxe-table/styles/variable.scss';\n\n // 局部修改变量\n $vxe-font-size: 14px;\n $vxe-font-color: #666;\n $vxe-primary-color: #409eff;\n\n @import 'vxe-table/styles/icon.scss';\n @import 'vxe-table/styles/table.scss';\n @import 'vxe-table/styles/column.scss';\n @import 'vxe-table/styles/header.scss';\n @import 'vxe-table/styles/body.scss';\n @import 'vxe-table/styles/footer.scss';\n @import 'vxe-table/styles/filter.scss';\n @import 'vxe-table/styles/loading.scss';\n @import 'vxe-table/styles/grid.scss';\n @import 'vxe-table/styles/menu.scss';\n @import 'vxe-table/styles/toolbar.scss';\n @import 'vxe-table/styles/pager.scss';\n @import 'vxe-table/styles/checkbox.scss';\n @import 'vxe-table/styles/radio.scss';\n @import 'vxe-table/styles/input.scss';\n @import 'vxe-table/styles/button.scss';\n @import 'vxe-table/styles/modal.scss';\n @import 'vxe-table/styles/tooltip.scss';\n ")]),e._v("\n ")]),n("p",[e._v("Case 4.如果需要完全重写主题样式，把 vxe-table/styles/** 目录全部复制到项目中自行修改（例如 /assets/styles/xtable 目录下）")]),n("pre",[e._v(" "),n("code",{staticClass:"scss"},[e._v("\n @import './assets/styles/xtable/index.scss';\n ")]),e._v("\n ")])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"32c2":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 默认的渲染器 "),n("table-column-api-link",{attrs:{prop:"cell-render"}}),e._v("，查看 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/examples/plugins/xtable/renderer"}},[e._v("示例的源码")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" renderHeader (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ column, columnIndex, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表头"),n("br"),e._v(" renderDefault (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ row, rowIndex, column, columnIndex, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表内容"),n("br"),e._v(" renderFooter (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ column, columnIndex, items, itemIndex, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表尾"),n("br"),e._v(" cellExportMethod ("),n("vxe-tooltip",{attrs:{content:"{ row, column }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 单元格导出函数"),n("br"),e._v(" footerCellExportMethod ("),n("vxe-tooltip",{attrs:{content:"{ items, itemIndex }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表尾单元格导出函数"),n("br")],1),n("vxe-table",{attrs:{border:"",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","cell-render":{name:"MyLink",events:{click:e.linkEvent}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[],demoCodes:["\n // 创建一个超链接渲染器\n VXETable.renderer.add('MyLink', {\n // 默认显示模板\n renderDefault (h, renderOpts, params) {\n let { row, column } = params\n let { events } = renderOpts\n return [\n <a class=\"my-link\" onClick={ () => events.click(params) }>{row[column.property]}</a>\n ]\n }\n })\n ",'\n <vxe-table\n border\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :cell-render="{name: \'MyLink\', events: {click: linkEvent}}"></vxe-table-column>\n <vxe-table-column field="sex" title="sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n },\n methods: {\n linkEvent ({ row }) {\n console.log(row.name)\n }\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))},methods:{linkEvent:function(e){var t=e.row;console.log(t.name)}}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"335c":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h1",[e._v(e._s(e.$t("app.aside.nav.interceptor")))]),e._m(0),n("vxe-table",{staticClass:"api-table",attrs:{resizable:"","highlight-current-row":"","highlight-hover-row":"","highlight-current-column":"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.api.title.prop","min-width":"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"desc",title:"app.api.title.desc","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"type",title:"app.api.title.type","min-width":"140"}}),n("vxe-table-column",{attrs:{field:"enum",title:"app.api.title.enum","min-width":"150"}}),n("vxe-table-column",{attrs:{field:"defVal",title:"app.api.title.defVal","min-width":"160"}}),n("vxe-table-column",{attrs:{field:"version",title:e.$t("app.api.title.version"),width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{directives:[{name:"show",rawName:"v-show",value:a.version,expression:"row.version"}],staticClass:"compatibility"},[e._v("v"+e._s(a.version))])]}}])})],1),n("h2",[e._v("可选值")]),n("vxe-table",{staticClass:"api-table",attrs:{resizable:"","highlight-hover-row":"",data:e.typeList}},[n("vxe-table-column",{attrs:{field:"name",title:"app.api.title.prop","min-width":"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"desc",title:"app.api.title.desc","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"type",title:"app.api.title.type","min-width":"140"}}),n("vxe-table-column",{attrs:{field:"enum",title:"app.api.title.enum","min-width":"150"}}),n("vxe-table-column",{attrs:{field:"defVal",title:"app.api.title.defVal","min-width":"160"}}),n("vxe-table-column",{attrs:{field:"version",title:e.$t("app.api.title.version"),width:"120"},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.row;return[n("span",{directives:[{name:"show",rawName:"v-show",value:a.version,expression:"row.version"}],staticClass:"compatibility"},[e._v("v"+e._s(a.version))])]}}])})],1),n("h2",[e._v("示例")]),n("p",{staticClass:"tip"},[e._v("例子：比如自定义渲染某个组件后，由于弹出层面板不在单元格之内，按键事件的交互行为存在冲突，对于这些场景就很有用了")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n ")])],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("通过内置事件拦截器可以很容易的处理表格事件行为与第三方组件的兼容性；比如这些插件 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-element",target:"_blank"}},[e._v("vxe-table-plugin-element")])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[{name:"add(type, callback)",desc:"添加",version:"",type:"",enum:"",defVal:"type, callback",list:[]},{name:"mixin(map)",desc:"混合多个",version:"",type:"",enum:"",defVal:"map",list:[]},{name:"delete(type)",desc:"删除",version:"",type:"",enum:"",defVal:"name",list:[]}],typeList:[{name:"created",desc:"表格初始化时触发",version:"2.6",type:"",enum:"",defVal:"",list:[]},{name:"mounted",desc:"表格挂载时触发",version:"2.6",type:"",enum:"",defVal:"",list:[]},{name:"activated",desc:"表格激活时触发",version:"2.6",type:"",enum:"",defVal:"",list:[]},{name:"deactivated",desc:"表格停用时触发",version:"2.6",type:"",enum:"",defVal:"",list:[]},{name:"beforeDestroy",desc:"表格销毁之前触发",version:"2.6",type:"",enum:"",defVal:"",list:[]},{name:"destroyed",desc:"表格销毁时触发",version:"2.6",type:"",enum:"",defVal:"",list:[]},{name:"event.clearFilter",desc:"清除激活单元格之前触发，允许返回 false 阻止默认行为",version:"2.1",type:"Boolean",enum:"",defVal:"",list:[]},{name:"event.clearActived",desc:"清除筛选面板之前触发，允许返回 false 阻止默认行为",version:"",type:"Boolean",enum:"",defVal:"",list:[]},{name:"event.keydown",desc:"键盘按下之前触发，允许返回 false 阻止默认行为",version:"2.5.9",type:"Boolean",enum:"",defVal:"",list:[]},{name:"event.showMenu",desc:"显示快捷菜单之前触发，允许返回 false 阻止默认行为",version:"2.4",type:"Boolean",enum:"",defVal:"",list:[]},{name:"event.import",desc:"导入之前触发，允许返回 false 阻止默认行为",version:"2.6.14",type:"Boolean",enum:"",defVal:"",list:[]},{name:"event.export",desc:"导出之前触发，允许返回 false 阻止默认行为",version:"2.6.14",type:"Boolean",enum:"",defVal:"",list:[]}],demoCodes:["\n VXETable.interceptor.add('event.clearActived', (params, event) => {\n // 比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。\n if (event.target.className.indexOf('other-popper') > -1) {\n return false\n }\n })\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"358e":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h1",[e._v("全局快捷菜单注册器")]),n("p",{staticClass:"tip"},[e._v("你可以很简单的将常用的快捷菜单注册成全局可复用的")]),n("vxe-table",{attrs:{resizable:"","highlight-current-row":"","highlight-hover-row":"","highlight-current-column":"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.api.title.prop","min-width":"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"desc",title:"app.api.title.desc","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"type",title:"app.api.title.type","min-width":"140"}}),n("vxe-table-column",{attrs:{field:"enum",title:"app.api.title.enum","min-width":"150"}}),n("vxe-table-column",{attrs:{field:"defVal",title:"app.api.title.defVal","min-width":"160"}})],1),n("h2",[e._v("示例")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"html"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[{name:"add(code, callback)",desc:"添加",type:"",enum:"",defVal:"code, callback",list:[]},{name:"mixin(map)",desc:"混合多个",type:"",enum:"",defVal:"map",list:[]},{name:"delete(code)",desc:"删除",type:"",enum:"",defVal:"name",list:[]}],demoCodes:['\n <vxe-table\n border\n :context-menu="tableMenu"\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n </vxe-table>\n ',"\n VXETable.menus.add('exportData', (params, event) => {\n let { $table } = params\n $table.exportData()\n })\n\n VXETable.menus.add('insert', (params, event) => {\n let { $table, menu } = params\n // 读取自定义的参数\n $table.insert(menu.record)\n })\n\n export default {\n data () {\n return {\n tableData: [],\n tableMenu: {\n body: {\n options: [\n [\n { code: 'exportData', name: '导出.csv' },\n { code: 'insert', name: '新增', record: { name: '默认名称' } }\n ]\n ]\n }\n }\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"3c4e8":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 表单-项渲染器 "),n("grid-api-link",{attrs:{prop:"itemRender"}}),e._v("，查看 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/examples/plugins/xtable/renderer"}},[e._v("示例的源码")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" renderItem (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ data, property, $form }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 项"),n("br"),e._v(" itemVisibleMethod ("),n("vxe-tooltip",{attrs:{content:"{ data, property }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 项可视函数"),n("br")],1),n("vxe-grid",{attrs:{border:"",resizable:"","export-config":"",height:"400",toolbar:{export:!0,custom:!0},"form-config":e.tableForm,"proxy-config":e.tableProxy,columns:e.tableColumn}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),s=n.n(r),i=n("1487"),o=n.n(i),c={data:function(){return{tableColumn:[{type:"seq",width:50},{field:"name",title:"Name"},{field:"age",title:"Age"},{field:"sex",title:"Sex"},{field:"role",title:"Role"}],tableForm:{data:{name:"",age:""},items:[{field:"name",title:"名称",itemRender:{name:"FormItemInput",props:{clearable:!0,placeholder:"请输入名称"}}},{field:"age",title:"年龄",itemRender:{name:"FormItemInput",props:{type:"number",clearable:!0,placeholder:"请输入年龄"}}},{itemRender:{name:"input",attrs:{type:"submit",value:"查询"}}},{itemRender:{name:"input",attrs:{type:"reset",value:"重置"}}}]},tableProxy:{form:!0,ajax:{query:function(e){var t=e.form;return s.a.get("/api/user/list",t)}}},demoCodes:["\n // 创建一个表单-输入框渲染器\n VXETable.renderer.add('FormItemInput', {\n // 项显示模板\n renderItem (h, renderOpts, params) {\n const { data, property } = params\n const props = renderOpts.props || {}\n return [\n <vxe-input v-model={ data[property] } { ...{ props } }></vxe-input>\n ]\n }\n })\n ",'\n <vxe-grid\n border\n resizable\n export-config\n height="400"\n :toolbar="{export: true, custom: true}"\n :form-config="tableForm"\n :proxy-config="tableProxy"\n :columns="tableColumn">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableColumn: [\n { type: 'seq', width: 50 },\n { field: 'name', title: 'Name' },\n { field: 'age', title: 'Age' },\n { field: 'sex', title: 'Sex' },\n { field: 'role', title: 'Role' }\n ],\n tableForm: {\n data: {\n name: '',\n age: ''\n },\n items: [\n { field: 'name', title: '名称', itemRender: { name: 'FormItemInput', props: { clearable: true, placeholder: '请输入名称' } } },\n { field: 'age', title: '年龄', itemRender: { name: 'FormItemInput', props: { type: 'number', clearable: true, placeholder: '请输入年龄' } } },\n { itemRender: { name: 'input', attrs: { type: 'submit', value: '查询' } } },\n { itemRender: { name: 'input', attrs: { type: 'reset', value: '重置' } } }\n ]\n },\n tableProxy: {\n form: true,\n ajax: {\n query: ({ form }) => XEAjax.get('/api/user/list', form)\n }\n }\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))}},d=c,m=n("2877"),u=Object(m["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},"441a":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Custom Icons 自定义图标")]),n("p",{staticClass:"tip"},[e._v("如果项目已有适合的图标，例如 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/font-awesome",target:"_black"}},[e._v("font-awesome")]),e._v(" 图标库，可通过配置替换并自行调整相关的样式即可")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import VXETable from 'vxe-table'\n\n VXETable.setup({\n icon: {\n sortAsc: 'vxe-icon--caret-top',\n sortDesc: 'vxe-icon--caret-bottom',\n filterNone: 'vxe-icon--funnel',\n filterMatch: 'vxe-icon--funnel',\n edit: 'vxe-icon--edit-outline',\n treeLoaded: 'vxe-icon--refresh roll',\n treeOpen: 'vxe-icon--caret-right rotate90',\n treeClose: 'vxe-icon--caret-right',\n expandLoaded: 'vxe-icon--refresh roll',\n expandOpen: 'vxe-icon--arrow-right rotate90',\n expandClose: 'vxe-icon--arrow-right',\n refresh: 'vxe-icon--refresh',\n refreshLoading: 'vxe-icon--refresh roll',\n formPrefix: 'vxe-icon--question',\n formSuffix: 'vxe-icon--question',\n formFolding: 'vxe-icon--arrow-top rotate180',\n formUnfolding: 'vxe-icon--arrow-top',\n import: 'vxe-icon--upload',\n importRemove: 'vxe-icon--close',\n export: 'vxe-icon--download',\n zoomIn: 'vxe-icon--zoomin',\n zoomOut: 'vxe-icon--zoomout',\n custom: 'vxe-icon--menu',\n inputClear: 'vxe-icon--close',\n inputPwd: 'vxe-icon--eye-slash',\n inputShowPwd: 'vxe-icon--eye',\n inputPrevNum: 'vxe-icon--caret-top',\n inputNextNum: 'vxe-icon--caret-bottom',\n inputDate: 'vxe-icon--calendar',\n inputDateOpen: 'vxe-icon--caret-bottom rotate180',\n inputDateClose: 'vxe-icon--caret-bottom',\n selectOpen: 'vxe-icon--caret-bottom rotate180',\n selectClose: 'vxe-icon--caret-bottom',\n jumpPrev: 'vxe-icon--d-arrow-left',\n jumpNext: 'vxe-icon--d-arrow-right',\n prevPage: 'vxe-icon--arrow-left',\n nextPage: 'vxe-icon--arrow-right',\n jumpMore: 'vxe-icon--more',\n modalZoomIn: 'vxe-icon--square',\n modalZoomOut: 'vxe-icon--zoomout',\n modalClose: 'vxe-icon--close',\n modalInfo: 'vxe-icon--info',\n modalSuccess: 'vxe-icon--success',\n modalWarning: 'vxe-icon--warning',\n modalError: 'vxe-icon--error',\n modalQuestion: 'vxe-icon--question',\n modalLoading: 'vxe-icon--refresh roll',\n dropdownBtn: 'vxe-icon--arrow-bottom',\n btnLoading: 'vxe-icon--refresh roll'\n }\n })\n ")]),e._v("\n ")])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"4b3a":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h1",[e._v("Renderer 渲染器")]),e._m(0),n("h2",[e._v("API")]),n("vxe-table",{attrs:{resizable:"","highlight-hover-row":"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.api.title.prop","min-width":"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"desc",title:"app.api.title.desc","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"type",title:"app.api.title.type","min-width":"140"}}),n("vxe-table-column",{attrs:{field:"enum",title:"app.api.title.enum","min-width":"150"}}),n("vxe-table-column",{attrs:{field:"defVal",title:"app.api.title.defVal","min-width":"160"}})],1),n("h2",[e._v("原生渲染器")]),n("vxe-table",{attrs:{resizable:"","highlight-hover-row":"",data:e.nativeRenderList}},[n("vxe-table-column",{attrs:{field:"name",title:"渲染器名称","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"desc",title:"描述说明","min-width":"280"}})],1),n("h2",[e._v("内置渲染器")]),n("vxe-table",{attrs:{resizable:"","highlight-hover-row":"",data:e.xRenderList}},[n("vxe-table-column",{attrs:{field:"name",title:"渲染器名称","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"desc",title:"描述说明","min-width":"280"}})],1)],1)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v(" 通过渲染器你可以轻松实现筛选、单元格的复用，可以根据不同业务实现不一样的渲染器，这个功能将非常实用；比如这些插件 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table-plugin-element",target:"_blank"}},[e._v("vxe-table-plugin-element")]),n("br"),n("span",{staticClass:"orange"},[e._v("渲染器：抽象一切可复用的功能（类似组件的概念），实现非常简单的可配置化；")]),n("br"),n("span",{staticClass:"orange"},[e._v("插槽：自定义程度高，但需要重复写冗余代码，比较繁琐；")]),n("br"),n("span",{staticClass:"red"},[e._v("建议通过 JSX 实现更加简单，可维护性更好，返回数组格式的 JSX")]),n("br"),n("span",{staticClass:"red"},[e._v("（注：实际开发中应该将业务封装成一个组件，不要把复杂的渲染逻辑写在渲染器中，渲染器只负责表格与自定义组件之间的对接关系）")])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{nativeRenderList:[{name:"input",desc:"原生-输入框"},{name:"textarea",desc:"原生-文本域"},{name:"select",desc:"原生-下拉框"}],xRenderList:[{name:"$button",desc:"模块-按钮"},{name:"$buttons",desc:"模块-按钮列表"},{name:"$input",desc:"模块-输入框"},{name:"$select",desc:"模块-下拉框"},{name:"$radio",desc:"模块-单选列表"},{name:"$checkbox",desc:"模块-复选列表"}],tableData:[{name:"add(name, options)",desc:"添加",version:"",type:"",enum:"",defVal:"name, options",list:[]},{name:"mixin(map)",desc:"混合多个",version:"",type:"",enum:"",defVal:"map",list:[]},{name:"delete(name)",desc:"删除",version:"",type:"",enum:"",defVal:"name",list:[]}]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"4f59":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 空内容渲染器 "),n("table-api-link",{attrs:{prop:"empty-render"}}),e._v("，查看 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/examples/plugins/xtable/renderer"}},[e._v("示例的源码")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" renderEmpty (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 空内容"),n("br")],1),n("vxe-table",{attrs:{border:"",resizable:"",height:"400","empty-render":{name:"NotData"},data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name"}}),n("vxe-table-column",{attrs:{field:"sex",title:"sex"}}),n("vxe-table-column",{attrs:{field:"age",title:"Age"}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[],demoCodes:["\n // 创建一个空内容渲染器\n VXETable.renderer.add('NotData', {\n // 空内容模板\n renderEmpty (h, renderOpts) {\n return [\n <span>\n <img src=\"static/other/img1.gif\"/>\n <p>亲，没有更多数据了！</p>\n </span>\n ]\n }\n })\n ",'\n <vxe-table\n border\n resizable\n height="400"\n :empty-render="{name: \'NotData\'}"\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="sex" title="sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},"61d9":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("npm install")]),n("p",{staticClass:"tip"},[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo",target:"_blank"}},[e._v("安装指南")]),n("br"),e._v(" 推荐使用 npm 的方式安装，它能更好地和 "),n("a",{staticClass:"link",attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(" 打包工具配合使用。"),n("br"),e._v(" 依赖库： "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/xe-utils"}},[e._v("xe-utils2.4+")]),e._v(" "),n("a",{staticClass:"link",staticStyle:{"font-size":"20px","font-weight":"700"},attrs:{href:"https://cn.vuejs.org/v2/guide/components-slots.html#%E5%8A%A8%E6%80%81%E6%8F%92%E6%A7%BD%E5%90%8D"}},[e._v("vue2.6+")]),n("br"),e._v(" （注：使用 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table"}},[e._v("vxe-table")]),e._v(" 之前必须熟悉 "),n("a",{attrs:{href:"https://cn.vuejs.org/"}},[e._v("vue")]),e._v(" 相关用法，否则不建议使用） ")]),n("pre",[e._v(" "),n("code",{staticClass:"shell"},[e._v("\n npm install xe-utils vxe-table\n ")]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v("\n import Vue from 'vue'\n import 'xe-utils'\n import VXETable from 'vxe-table'\n import 'vxe-table/lib/index.css'\n\n Vue.use(VXETable)\n ")]),e._v("\n ")]),n("h2",[e._v("CDN")]),n("p",{staticClass:"tip"},[e._v("可以通过 "),n("a",{staticClass:"link",attrs:{href:"https://unpkg.com/vxe-table/"}},[e._v("unpkg")]),e._v(" 或 "),n("a",{staticClass:"link",attrs:{href:"https://cdn.jsdelivr.net/npm/vxe-table/"}},[e._v("cdnjs")]),e._v(" 获取到最新版本的资源，并在页面上引入即可")]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v('\n \x3c!-- 引入样式 --\x3e\n <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css">\n \x3c!-- 引入脚本 --\x3e\n <script src="https://cdn.jsdelivr.net/npm/xe-utils"><\/script>\n <script src="https://cdn.jsdelivr.net/npm/vxe-table"><\/script>\n ')]),e._v("\n ")])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},7704:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 工具栏-按钮渲染器 "),n("grid-api-link",{attrs:{prop:"buttonRender"}}),e._v("，查看 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/examples/plugins/xtable/renderer"}},[e._v("示例的源码")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" renderButton (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ button, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 按钮"),n("br")],1),n("vxe-grid",{ref:"xGrid",attrs:{border:"",resizable:"","export-config":"",height:"400",toolbar:e.tableToolbar,"proxy-config":e.tableProxy,columns:e.tableColumn}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("628a")),s=n.n(r),i=n("1487"),o=n.n(i),c={data:function(){return{tableColumn:[{type:"seq",width:50},{field:"name",title:"Name"},{field:"age",title:"Age"},{field:"sex",title:"Sex"},{field:"role",title:"Role"}],tableToolbar:{export:!0,custom:!0,buttons:[{name:"刷新",code:"reload",icon:"fa fa-refresh"},{code:"query",buttonRender:{name:"ToolbarButtonRefresh",events:{click:this.btnClickEvent}}}]},tableProxy:{ajax:{query:function(){return s.a.get("/api/user/list")}}},demoCodes:["\n // 创建一个工具栏-按钮渲染器（仅用于简单示例，实际开发中应该封装成一个组件，不应该把复杂的渲染逻辑写在渲染器中）\n VXETable.renderer.add('ToolbarButtonRefresh', {\n renderButton (h, renderOpts, params) {\n const { events } = renderOpts\n const { button } = params\n return [\n <vxe-button onClick={ e => { events.click(button) } }>自定义按钮</vxe-button>\n ]\n }\n })\n ",'\n <vxe-grid\n border\n resizable\n export-config\n ref="xGrid"\n height="400"\n :toolbar="tableToolbar"\n :proxy-config="tableProxy"\n :columns="tableColumn">\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n tableColumn: [\n { type: 'seq', width: 50 },\n { field: 'name', title: 'Name' },\n { field: 'age', title: 'Age' },\n { field: 'sex', title: 'Sex' },\n { field: 'role', title: 'Role' }\n ],\n tableToolbar: {\n export: true,\n custom: true,\n buttons: [\n { name: '刷新', code: 'reload', icon: 'fa fa-refresh' },\n { code: 'query', buttonRender: { name: 'ToolbarButtonRefresh', events: { click: this.btnClickEvent } } }\n ]\n },\n tableProxy: {\n ajax: {\n query: () => XEAjax.get('/api/user/list')\n }\n }\n }\n },\n methods: {\n btnClickEvent (button) {\n switch (button.code) {\n case 'query':\n this.$refs.xGrid.commitProxy(button.code)\n break\n }\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{btnClickEvent:function(e){switch(e.code){case"query":this.$refs.xGrid.commitProxy(e.code);break}}}},d=c,m=n("2877"),u=Object(m["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},"8dea":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("size")]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v("\n 每个组件都有 size 属性，默认是继承父组件，所以只要给局部的父组件设置 size，所有后代组件一律继承，该功能对于很多场景中都非常有用\n ")]),e._v("\n ")]),n("h2",[e._v("Default Global Props")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import VXETable from 'vxe-table'\n\n VXETable.setup({\n // 表格的全局参数\n // size: 'small',\n // showOverflow: null,\n // showHeaderOverflow: null,\n // align: null,\n // headerAlign: null,\n // stripe: false,\n // border: false,\n // resizable: false,\n // showHeader: true,\n // highlightCurrentRow: false,\n // highlightHoverRow: false,\n // highlightCurrentColumn: false,\n // highlightHoverColumn: false,\n // zIndex: 100, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡\n // keepSource: false,\n // rowId: '_XID',\n radioConfig: {\n // trigger: 'default'\n },\n checkboxConfig: {\n // trigger: 'default'\n },\n sortConfig: {\n // remote: false,\n // trigger: 'default'\n },\n filterConfig: {\n // remote: false\n },\n importConfig: {\n // mode: 'covering',\n // modes: ['insert', 'covering'],\n // remote: false,\n // importMethod () {}\n },\n exportConfig: {\n // isPrint: true,\n // modes: ['current', 'selected'],\n // types: ['csv', 'html', 'xml', 'txt'],\n // remote: false,\n // exportMethod () {}\n },\n expandConfig: {\n // trigger: 'default'\n },\n treeConfig: {\n // children: 'children',\n // hasChild: 'hasChild',\n // indent: 20\n },\n tooltipConfig: {\n // theme: 'dark'\n },\n validConfig: {\n // message: 'default'\n },\n editConfig: {\n // mode: 'cell'\n },\n contextMenu: {\n // header: {\n // options: []\n // },\n // body: {\n // options: []\n // },\n // footer: {\n // options: []\n // },\n // visibleMethod () {}\n },\n // 版本号（对于某些带 Storage 数据储存的功能有用到，上升版本号可以用于重置 Storage 数据）\n // version: 0,\n // 高级表格的全局参数\n grid: {\n proxyConfig: {\n // autoLoad: true,\n // message: true,\n // props: {\n // list: null,\n // result: 'result',\n // total: 'page.total'\n // },\n // 列初始化之前\n // beforeColumn ({ column }) {},\n // 查询触发之前\n // beforeQuery ({ options, page, sort, filters }) {\n // page 如果有，读取当前分页的对象\n // sort 如果有，读取当前排序的条件\n // filters 如果有，读取当前筛选的条件\n // return fetch('url', { method: 'GET' }).then(response => response.json())\n // },\n // 删除触发之前\n // beforeDelete ({ options, body }) {\n // body.removeRecords 移除的数据列表\n // return fetch('url', { method: 'DELETE' }).then(response => response.json())\n // },\n // 删除完成之后\n // afterDelete ({ $grid }) {\n // $grid.commitProxy('reload')\n // },\n // 保存触发之前\n // beforeSave ({ options, body }) {\n // body.pendingRecords 标记删除的数据列表\n // body.insertRecords 插入的数据列表\n // body.removeRecords 移除的数据列表\n // body.updateRecords 改变的数据列表\n // return fetch('url', { method: 'POST', body }).then(response => response.json())\n // },\n // 保存完成之后\n // afterSave ({ $grid }) {\n // $grid.commitProxy('reload')\n // }\n }\n },\n // 默认 tooltip 主题样式\n tooltip: {\n // trigger: 'hover',\n // theme: 'dark'\n },\n // 分页的全局参数\n pager: {\n // perfect: true,\n // pageSize: 10,\n // pagerCount: 7,\n // pageSizes: [10, 15, 20, 50, 100],\n // layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total'] // 非常灵活的分页布局，支持任意位置随意换\n },\n // 表单的全局参数\n form: {\n // colon: false\n },\n input: {\n // transfer: false,\n dateConfig: {\n startWeek: 1\n // parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',\n // labelFormat: '',\n // valueFormat: ''\n }\n },\n // 下拉框的全局参数\n select: {\n // transfer: false\n },\n // 工具栏的全局参数\n toolbar: {\n // refresh: false,\n // resizable: {\n // storage: false\n // },\n // custom: {\n // storage: false,\n // isFooter: true\n // },\n // buttons: []\n },\n // 模态窗口的全局参数\n modal: {\n // minWidth: 340,\n // minHeight: 200,\n // lockView: true,\n // mask: true,\n // duration: 3000,\n // marginSize: 8,\n // dblclickZoom: true,\n // showTitleOverflow: true,\n // remember: false,\n // animat: true,\n // storage: false,\n // storageKey: 'VXE_MODAL_POSITION'\n },\n // 优化的全局参数\n optimization : {\n // animat: true,\n // cloak: false, // 可以设置为 true 来避免初始化渲染时的闪动\n // delayHover: 250,\n // scrollX: {\n // gt: 40\n // },\n // scrollY: {\n // gt: 100\n // }\n },\n // 集成国际化（将对列头、校验提示..进行自动翻译）\n // translate: : key => i18n.t(key)\n })\n ")]),e._v("\n ")])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},9517:function(e,t,n){},a099:function(e,t,n){"use strict";var a=n("9517"),l=n.n(a);l.a},a325:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Internationalization 国际化")]),e._m(0),n("pre",[e._v(" "),n("code",{staticClass:"shell"},[e._v("\n npm install vue-i18n\n ")]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n ")]),n("h2",[e._v("集成国际化")]),e._m(1),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"html"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")]),n("h2",[e._v("发现错误？想参与翻译？")]),e._m(2),e._m(3)])},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("目前支持的"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/packages/locale/lang",target:"_blank"}},[e._v("国际化列表")]),e._v("，若希望使用指定语言，则需要进行多语言设置。以中/英文为例"),n("br"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-i18n",target:"_blank"}},[e._v("项目示例")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("若希望在项目中支持全局自动翻译，可以通过全局参数开启（将对列头、校验提示..进行自动翻译）"),n("br"),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo/tree/master/vxe-table-by-vue-i18n",target:"_blank"}},[e._v("项目示例")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("通过 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/pulls"}},[e._v("Pull requests")]),e._v(" 贡献翻译 -> "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/packages/locale/lang"}},[e._v("添加或修改")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("ul",{staticClass:"lang-list"},[n("li",[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/blob/master/packages/locale/lang/zh-CN.js",target:"_blank"}},[e._v("简体中文（zh-CN）")])]),n("li",[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/blob/master/packages/locale/lang/zh-TC.js",target:"_blank"}},[e._v("繁体中文（zh-TC）")])]),n("li",[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/blob/master/packages/locale/lang/en-US.js",target:"_blank"}},[e._v("英文（en-US）")])]),n("li",[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/blob/master/packages/locale/lang/ja-JP.js",target:"_blank"}},[e._v("日语（ja-JP）")])])])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{demoCodes:["\n import Vue from 'vue'\n import VueI18n from 'vxe-i18n'\n import VXETable from 'vxe-table'\n import zhCN from 'vxe-table/lib/locale/lang/zh-CN'\n import enUS from 'vxe-table/lib/locale/lang/en-US'\n\n const messages = {\n zh_CN: {\n ...zhCN\n },\n en_US: {\n ...enUS\n }\n }\n\n const i18n = new VueI18n({\n locale: 'zh_CN',\n messages,\n })\n\n Vue.use(VXETable, {\n // 对组件内置的提示语进行国际化翻译\n i18n: key => i18n.t(key)\n })\n\n new Vue({ i18n }).$mount('#app')\n ","\n Vue.use(VXETable, {\n // 对参数的内容自动进行国际化翻译（只对支持国际化的有效）\n translate: key => i18n.t(key)\n // translate (key) {\n // // 只翻译 \"app.\" 开头的键值\n // if (key && key.indexOf('app.') > -1) {\n // return i18n.t(key)\n // }\n // return key\n // }\n })\n ",'\n <vxe-table\n border\n height="600"\n :data="tableData">\n <vxe-table-column field="name" title="app.body.label.name"></vxe-table-column>\n <vxe-table-column field="age" title="app.body.label.age"></vxe-table-column>\n <vxe-table-column field="sex" title="app.body.label.sex"></vxe-table-column>\n </vxe-table>\n ']}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=(n("a099"),n("2877")),d=Object(c["a"])(o,a,l,!1,null,"08f2a409",null);t["default"]=d.exports},a5da:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h1",[e._v("全局指令注册器")]),n("p",{staticClass:"tip"},[e._v("你可以很简单的将工具栏按钮或数据代理中常用的指令注册成全局可复用")]),n("vxe-table",{attrs:{resizable:"","highlight-current-row":"","highlight-hover-row":"","highlight-current-column":"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.api.title.prop","min-width":"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"desc",title:"app.api.title.desc","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"type",title:"app.api.title.type","min-width":"140"}}),n("vxe-table-column",{attrs:{field:"enum",title:"app.api.title.enum","min-width":"150"}}),n("vxe-table-column",{attrs:{field:"defVal",title:"app.api.title.defVal","min-width":"160"}})],1),n("h2",[e._v("示例")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"html"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"html"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[{name:"add(code, callback)",desc:"添加",version:"",type:"",enum:"",defVal:"code, callback",list:[]},{name:"mixin(map)",desc:"混合多个",version:"",type:"",enum:"",defVal:"map",list:[]},{name:"delete(code)",desc:"删除",version:"",type:"",enum:"",defVal:"name",list:[]}],demoCodes:['\n <vxe-toolbar :buttons="toolbarButtons"></vxe-toolbar>\n\n <vxe-table\n border\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'input\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="sex"></vxe-table-column>\n <vxe-table-column field="age" title="Age"></vxe-table-column>\n </vxe-table>\n ',"\n VXETable.commands.add('exportBtn', (params, event) => {\n let { $table, code, button } = params\n $table.exportData()\n })\n\n export default {\n data () {\n return {\n tableData: [],\n toolbarButtons: [\n {\n code: 'exportBtn',\n name: '导出.csv'\n }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n }\n }\n ",'\n <button @click="printEvent">打印</button>\n <vxe-grid\n border\n resizable\n ref="xGrid"\n height="300"\n :columns="tableColumn"\n :data="tableData">\n </vxe-grid>\n ',"\n VXETable.commands.add('myPrint', (params, event) => {\n let { $table, code, button } = params\n $table.print()\n })\n\n export default {\n data () {\n return {\n tableData: [],\n tableColumn: [\n { type: 'seq', width: 50 },\n { field: 'name', title: 'Name' },\n { field: 'sex', title: 'Sex' },\n { field: 'address', title: 'Address' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n },\n methods: {\n printEvent () {\n this.$refs.xGrid.commitProxy('myPrint')\n }\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},d0c5:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 可编辑渲染器 "),n("table-column-api-link",{attrs:{prop:"edit-render"}}),e._v("，查看 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/examples/plugins/xtable/renderer"}},[e._v("示例的源码")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" autofocus 自动聚焦的类名"),n("br"),e._v(" renderHeader (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ column, columnIndex, columnIndex, $rowIndex, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表头"),n("br"),e._v(" renderEdit (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表内容-编辑"),n("br"),e._v(" renderCell (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表内容-显示"),n("br"),e._v(" renderFooter (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ column, columnIndex, $columnIndex, $rowIndex, itemIndex, items, $table }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表尾"),n("br"),e._v(" editCellExportMethod ("),n("vxe-tooltip",{attrs:{content:"{ row, column }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 单元格导出函数"),n("br"),e._v(" footerCellExportMethod ("),n("vxe-tooltip",{attrs:{content:"{ items, itemIndex }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表尾单元格导出函数"),n("br")],1),n("vxe-table",{attrs:{border:"",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Name","edit-render":{name:"MyInput"}}}),n("vxe-table-column",{attrs:{field:"sex",title:"sex","edit-render":{name:"MyInput"}}}),n("vxe-table-column",{attrs:{field:"age",title:"Age","edit-render":{name:"input",attrs:{type:"number"}}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[],demoCodes:['\n // 创建一个简单输入框渲染器\n VXETable.renderer.add(\'MyInput\', {\n // 可编辑激活模板\n renderEdit (h, renderOpts, { row, column }) {\n return [\n <input class="my-cell" text="text" v-model={ row[column.property] } />\n ]\n },\n // 可编辑显示模板\n renderCell (h, renderOpts, { row, column }) {\n return [\n <span>{ row[column.property] }</span>\n ]\n }\n })\n ','\n <vxe-table\n border\n :data="tableData"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name" :edit-render="{name: \'MyInput\'}"></vxe-table-column>\n <vxe-table-column field="sex" title="sex" :edit-render="{name: \'MyInput\'}"></vxe-table-column>\n <vxe-table-column field="age" title="Age" :edit-render="{name: \'input\', attrs: { type:\'number\'}}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,6)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},d605:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h1",[e._v("全局格式化")]),n("p",{staticClass:"tip"},[e._v("你可以很简单的将单元格的格式化函数注册成全局可复用，通过 "),n("table-column-api-link",{attrs:{prop:"formatter"}}),e._v(" 调用")],1),n("vxe-table",{attrs:{resizable:"","highlight-current-row":"","highlight-hover-row":"","highlight-current-column":"",data:e.tableData}},[n("vxe-table-column",{attrs:{field:"name",title:"app.api.title.prop","min-width":"280","tree-node":""}}),n("vxe-table-column",{attrs:{field:"desc",title:"app.api.title.desc","min-width":"200"}}),n("vxe-table-column",{attrs:{field:"type",title:"app.api.title.type","min-width":"140"}}),n("vxe-table-column",{attrs:{field:"enum",title:"app.api.title.enum","min-width":"150"}}),n("vxe-table-column",{attrs:{field:"defVal",title:"app.api.title.defVal","min-width":"160"}})],1),n("h2",[e._v("示例")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"html"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[{name:"add(code, callback)",desc:"添加",version:"",type:"",enum:"",defVal:"code, callback",list:[]},{name:"mixin(map)",desc:"混合多个",version:"",type:"",enum:"",defVal:"map",list:[]},{name:"delete(code)",desc:"删除",version:"",type:"",enum:"",defVal:"name",list:[]}],demoCodes:['\n <vxe-table\n border\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Name"></vxe-table-column>\n <vxe-table-column field="num" title="默认两位小数" formatter="myAmount"></vxe-table-column>\n <vxe-table-column field="num" title="保留3位小数" :formatter="[\'myAmount\', 3]"></vxe-table-column>\n </vxe-table>\n ',"\n // 格式金额，默认2位数\n VXETable.formats.add('myAmount', (cellValue, digits) => {\n return XEUtils.commafy(cellValue, { digits: digits || 2 })\n })\n\n export default {\n data () {\n return {\n tableData: []\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 6)\n }\n }\n "]}},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},f8c4:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("p",{staticClass:"tip"},[e._v(" 筛选渲染器 "),n("table-column-api-link",{attrs:{prop:"filter-render"}}),e._v("，查看 "),n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table/tree/master/examples/plugins/xtable/renderer"}},[e._v("示例的源码")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" className 自定义容器的 className"),n("br"),e._v(" isFooter 是否显示底部按钮"),n("br"),e._v(" renderFilter (h, renderOpts, "),n("vxe-tooltip",{attrs:{content:"{ column, $panel }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 内容"),n("br"),e._v(" filterMethod ("),n("vxe-tooltip",{attrs:{content:"{ option, row, column }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 筛选函数"),n("br")],1),n("vxe-table",{attrs:{border:"",height:"400",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"nickname",title:"Nickname",filters:[{data:null}],"filter-render":{name:"input",attrs:{placeholder:"请输入名字"}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"sex",filters:[{data:null}],"filter-render":{name:"$select",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"name",title:"实现条件的筛选",filters:[{data:{type:"has",isCase:!0,name:""}}],"filter-render":{name:"FilterComplex"}}}),n("vxe-table-column",{attrs:{field:"age",title:"实现内容的筛选",filters:[{data:{vals:[],sVal:""}}],"filter-render":{name:"FilterContent"}}}),n("vxe-table-column",{attrs:{field:"role",title:"实现Excel复杂的筛选",sortable:"",filters:[{data:{vals:[],sVal:"",fMenu:"",f1Type:"",f1Val:"",fMode:"and",f2Type:"",f2Val:""}}],"filter-render":{name:"FilterExcel"}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n "),n("code",{staticClass:"css"},[e._v(e._s(e.demoCodes[2]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[3]))]),e._v("\n "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[4]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[5]))]),e._v("\n ")])],1)},l=[],r=(n("4160"),n("a630"),n("fb6a"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={data:function(){return{tableData:[],sexList:[{label:"全部",value:""},{label:"男",value:"1"},{label:"女",value:"0"}],demoCodes:["\n // 创建一个复杂的渲染器（仅用于简单示例，实际开发中应该封装成一个组件，不应该把复杂的渲染逻辑写在渲染器中）\n VXETable.renderer.add('FilterComplex', {\n // 不显示底部按钮，使用自定义的按钮\n isFooter: false,\n // 筛选模板\n renderFilter (h, renderOpts, params) {\n return [\n <filter-complex params={ params }></filter-complex>\n ]\n },\n // 筛选方法\n filterMethod ({ option, row, column }) {\n let cellValue = XEUtils.get(row, column.property)\n let { type, name, isCase } = option.data\n if (cellValue) {\n if (isCase) {\n cellValue = cellValue.toLowerCase()\n name = name.toLowerCase()\n }\n switch (type) {\n case 'has':\n return cellValue.indexOf(name) > -1\n case 'eq':\n /* eslint-disable eqeqeq */\n return cellValue == name\n case 'gt':\n return cellValue > name\n case 'lt':\n return cellValue < name\n }\n }\n return false\n }\n })\n ",'\n <div>\n <div class="cmplex-filter">\n <div class="f-type">\n <vxe-radio v-model="option.data.type" name="fType" label="has">包含</vxe-radio>\n <vxe-radio v-model="option.data.type" name="fType" label="eq">等于</vxe-radio>\n <vxe-radio v-model="option.data.type" name="fType" label="gt">大于</vxe-radio>\n <vxe-radio v-model="option.data.type" name="fType" label="lt">小于</vxe-radio>\n </div>\n <div class="f-name">\n <vxe-input v-model="option.data.name" type="text" placeholder="请输入名称" @input="changeOptionEvent()"></vxe-input>\n </div>\n <div class="f-iscase">\n <vxe-checkbox v-model="option.data.isCase">不区分大小写</vxe-checkbox>\n </div>\n <div class="f-footer">\n <vxe-button status="primary" @click="confirmEvent">确认</vxe-button>\n <vxe-button @click="resetEvent">重置</vxe-button>\n </div>\n </div>\n </div>\n ',"\n .cmplex-filter {\n width: 260px;\n padding: 0 8px;\n }\n .cmplex-filter .f-type {\n padding: 8px 0;\n }\n .cmplex-filter .f-iscase {\n padding: 12px 0;\n }\n .cmplex-filter .f-footer {\n text-align: center;\n }\n ","\n export default {\n name: 'FilterInput',\n props: {\n params: Object,\n context: Object\n },\n data () {\n return {\n column: null,\n option: null\n }\n },\n created () {\n // filters 可以配置多个，实际只用一个就可以满足需求了\n const { column } = this.params\n const option = column.filters[0]\n this.column = column\n this.option = option\n },\n methods: {\n changeOptionEvent () {\n const { params, option } = this\n const { $panel } = params\n const checked = !!option.data\n $panel.changeOption(null, checked, option)\n }\n }\n }\n ",'\n <vxe-table border height="400" :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column\n field="nickname"\n title="Nickname"\n :filters="[{data: null}]"\n :filter-render="{name: \'input\', attrs: {placeholder: \'请输入名字\'}}"></vxe-table-column>\n <vxe-table-column\n field="sex"\n title="sex"\n :filters="[{data: null}]"\n :filter-render="{name: \'$select\', options: sexList}"></vxe-table-column>\n <vxe-table-column\n field="age"\n title="Age"\n :filters="[{data: null}]"\n :filter-render="{name: \'FilterInput\'}"></vxe-table-column>\n <vxe-table-column\n field="name"\n title="实现复杂的筛选"\n :filters="[{data: {type: \'has\', isCase: true, name: \'\'}}]"\n :filter-render="{name: \'FilterComplex\'}"></vxe-table-column>\n <vxe-table-column\n field="role"\n title="实现Excel复杂的筛选"\n sortable\n :filters="[{data: {vals: [], sVal: \'\', fMenu: \'\', f1Type:\'\', f1Val: \'\', fMode: \'and\', f2Type: \'\', f2Val: \'\'}}]"\n :filter-render="{name: \'FilterExcel\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n sexList: [\n {\n label: '全部',\n value: ''\n },\n {\n label: '男',\n value: '1'\n },\n {\n label: '女',\n value: '0'\n }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 15)\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,15)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports},f924:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Import 完整引入")]),n("p",{staticClass:"tip"},[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo",target:"_blank"}},[e._v("安装指南")]),n("br"),e._v(" 推荐使用 npm 的方式安装，它能更好地和 "),n("a",{staticClass:"link",attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(" 打包工具配合使用。"),n("br"),e._v(" 依赖库： "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/xe-utils"}},[e._v("xe-utils2.4+")]),e._v(" "),n("a",{staticClass:"link",staticStyle:{"font-size":"20px","font-weight":"700"},attrs:{href:"https://cn.vuejs.org/v2/guide/components-slots.html#%E5%8A%A8%E6%80%81%E6%8F%92%E6%A7%BD%E5%90%8D"}},[e._v("vue2.6+")]),n("br"),e._v(" （注：使用 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/vxe-table"}},[e._v("vxe-table")]),e._v(" 之前必须熟悉 "),n("a",{attrs:{href:"https://cn.vuejs.org/"}},[e._v("vue")]),e._v(" 相关用法，否则不建议使用） ")]),n("pre",[e._v(" "),n("code",{staticClass:"shell"},[e._v("\n npm install xe-utils vxe-table\n ")]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v("\n import Vue from 'vue'\n import 'xe-utils'\n import VXETable from 'vxe-table'\n import 'vxe-table/lib/index.css'\n\n Vue.use(VXETable)\n ")]),e._v("\n ")]),n("h2",[e._v("Import on demand 按需引入")]),n("p",{staticClass:"tip"},[n("a",{staticClass:"link",attrs:{href:"https://github.com/xuliangzhan/vxe-table-demo",target:"_blank"}},[e._v("安装指南")]),n("br"),e._v("借助插件 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/babel-plugin-import",target:"_blank"}},[e._v("babel-plugin-import")]),e._v(" 可以实现按需加载模块，减少文件体积。然后在文件 .babelrc 中配置")]),n("pre",[e._v(" "),n("code",{staticClass:"shell"},[e._v("\n npm install babel-plugin-import -D\n ")]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v('\n {\n "plugins": [\n [\n "import",\n {\n "libraryName": "vxe-table",\n "style": true // 样式是否也按需加载\n }\n ]\n ]\n }\n ')]),e._v("\n ")]),n("p",{staticClass:"tip"},[e._v("最后这样按需引入模块，就可以减小体积了")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import Vue from 'vue'\n import XEUtils from 'xe-utils'\n import {\n // 实例\n VXETable,\n // 模块\n Icon,\n Column,\n Header,\n Footer,\n Filter,\n Tooltip,\n Grid,\n Menu,\n Toolbar,\n Pager,\n Form,\n Checkbox,\n Radio,\n Input,\n Select,\n Button,\n Modal,\n Edit,\n Export,\n Keyboard,\n Validator,\n Resize,\n // 核心\n Table\n } from 'vxe-table'\n import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'\n\n // 按需加载的方式默认是不带国际化的，需要自行导入\n VXETable.setup({\n i18n: (key, value) => XEUtils.get(zhCNLocat, key)\n })\n\n // 先安装依赖模块\n Vue.use(Icon)\n Vue.use(Column)\n Vue.use(Header)\n Vue.use(Footer)\n Vue.use(Filter)\n Vue.use(Tooltip)\n Vue.use(Grid)\n Vue.use(Menu)\n Vue.use(Toolbar)\n Vue.use(Pager)\n Vue.use(Form)\n Vue.use(Checkbox)\n Vue.use(Radio)\n Vue.use(Input)\n Vue.use(Select)\n Vue.use(Button)\n Vue.use(Modal)\n Vue.use(Edit)\n Vue.use(Export)\n Vue.use(Keyboard)\n Vue.use(Validator)\n Vue.use(Resize)\n // 再安装核心库\n Vue.use(Table)\n ")]),e._v("\n ")])])}],r=(n("4160"),n("a630"),n("3ca3"),n("159b"),n("1487")),s=n.n(r),i={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},o=i,c=n("2877"),d=Object(c["a"])(o,a,l,!1,null,null,null);t["default"]=d.exports}}]); |