mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
1 line
71 KiB
JavaScript
1 line
71 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("span",{staticClass:"red"},[e._v("（具体请自行实现，该示例仅供参考）")]),n("br"),e._v(" 配置参数："),n("br"),e._v(" renderExpand (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")],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},"08d8":function(e,t,n){"use strict";var a=n("2cd0"),l=n.n(a);l.a},"0aa1":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(e._s(e.$t("app.aside.nav.theme")))]),e._m(0),e._m(1),n("p",{staticClass:"tip"},[e._v("Case 2.修改主题颜色，并引入所有样式")]),e._m(2),n("p",{staticClass:"tip"},[e._v("Case 3.修改主题颜色，并按需引入样式")]),e._m(3)])},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v("Case 1.使用默认的主题样式（"),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("项目示例")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",{staticClass:"scss"},[e._v("\n @import 'vxe-table/lib/index.css';\n ")]),e._v("\n ")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return 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 $vxe-table-border-radius: 4px;\n // ...\n\n @import 'vxe-table/styles/modules.scss';\n ")]),e._v("\n ")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return 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 $vxe-table-border-radius: 4px;\n // ...\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/menu.scss';\n @import 'vxe-table/styles/export.scss';\n\n @import 'vxe-table/styles/grid.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/textarea.scss';\n @import 'vxe-table/styles/button.scss';\n @import 'vxe-table/styles/modal.scss';\n @import 'vxe-table/styles/tooltip.scss';\n @import 'vxe-table/styles/form.scss';\n @import 'vxe-table/styles/select.scss';\n @import 'vxe-table/styles/switch.scss';\n @import 'vxe-table/styles/list.scss';\n @import 'vxe-table/styles/pulldown.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},"2cd0":function(e,t,n){},"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("span",{staticClass:"red"},[e._v("（具体请自行实现，该示例仅供参考）")]),n("br"),e._v(" 配置参数："),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(" renderDefault (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, _columnIndex, items, $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, _columnIndex }",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("示例")]),e._m(1),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")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[e._v(" 例子：比如自定义渲染某个组件后，由于弹出层面板不在单元格之内，按键事件的交互行为存在冲突，对于这些场景就很有用了"),n("br"),e._v(" 当然还有最简单的用法，直接给弹出面板加上 class=vxe-table--ignore-clear 即可 ")])}],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(e._s(e.$t("app.aside.nav.menus")))]),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("span",{staticClass:"red"},[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"),e._v(" itemResetMethod ("),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:{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 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,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"441a":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(e._s(e.$t("app.aside.nav.icons")))]),e._m(0),e._m(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/font-awesome",target:"_black"}},[e._v("font-awesome")]),e._v("，可通过配置替换并自行调整相关的样式即可")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import VXETable from 'vxe-table'\n\n VXETable.setup({\n // icon: {\n // // table\n // TABLE_SORT_ASC: 'vxe-icon--caret-top',\n // TABLE_SORT_DESC: 'vxe-icon--caret-bottom',\n // TABLE_FILTER_NONE: 'vxe-icon--funnel',\n // TABLE_FILTER_MATCH: 'vxe-icon--funnel',\n // TABLE_EDIT: 'vxe-icon--edit-outline',\n // TABLE_TREE_LOADED: 'vxe-icon--refresh roll',\n // TABLE_TREE_OPEN: 'vxe-icon--caret-right rotate90',\n // TABLE_TREE_CLOSE: 'vxe-icon--caret-right',\n // TABLE_EXPAND_LOADED: 'vxe-icon--refresh roll',\n // TABLE_EXPAND_OPEN: 'vxe-icon--arrow-right rotate90',\n // TABLE_EXPAND_CLOSE: 'vxe-icon--arrow-right',\n\n // // button\n // BUTTON_DROPDOWN: 'vxe-icon--arrow-bottom',\n // BUTTON_LOADING: 'vxe-icon--refresh roll',\n\n // // select\n // SELECT_OPEN: 'vxe-icon--caret-bottom rotate180',\n // SELECT_CLOSE: 'vxe-icon--caret-bottom',\n\n // // pager\n // PAGER_JUMP_PREV: 'vxe-icon--d-arrow-left',\n // PAGER_JUMP_NEXT: 'vxe-icon--d-arrow-right',\n // PAGER_PREV_PAGE: 'vxe-icon--arrow-left',\n // PAGER_NEXT_PAGE: 'vxe-icon--arrow-right',\n // PAGER_JUMP_MORE: 'vxe-icon--more',\n\n // // input\n // INPUT_CLEAR: 'vxe-icon--close',\n // INPUT_PWD: 'vxe-icon--eye-slash',\n // INPUT_SHOW_PWD: 'vxe-icon--eye',\n // INPUT_PREV_NUM: 'vxe-icon--caret-top',\n // INPUT_NEXT_NUM: 'vxe-icon--caret-bottom',\n // INPUT_DATE: 'vxe-icon--calendar',\n\n // // modal\n // MODAL_ZOOM_IN: 'vxe-icon--square',\n // MODAL_ZOOM_OUT: 'vxe-icon--zoomout',\n // MODAL_CLOSE: 'vxe-icon--close',\n // MODAL_INFO: 'vxe-icon--info',\n // MODAL_SUCCESS: 'vxe-icon--success',\n // MODAL_WARNING: 'vxe-icon--warning',\n // MODAL_ERROR: 'vxe-icon--error',\n // MODAL_QUESTION: 'vxe-icon--question',\n // MODAL_LOADING: 'vxe-icon--refresh roll',\n\n // // toolbar\n // TOOLBAR_TOOLS_REFRESH: 'vxe-icon--refresh',\n // TOOLBAR_TOOLS_REFRESH_LOADING: 'vxe-icon--refresh roll',\n // TOOLBAR_TOOLS_IMPORT: 'vxe-icon--upload',\n // TOOLBAR_TOOLS_EXPORT: 'vxe-icon--download',\n // TOOLBAR_TOOLS_ZOOM_IN: 'vxe-icon--zoomin',\n // TOOLBAR_TOOLS_ZOOM_OUT: 'vxe-icon--zoomout',\n // TOOLBAR_TOOLS_CUSTOM: 'vxe-icon--menu',\n\n // // form\n // FORM_PREFIX: 'vxe-icon--info',\n // FORM_SUFFIX: 'vxe-icon--info',\n // FORM_FOLDING: 'vxe-icon--arrow-top rotate180',\n // FORM_UNFOLDING: 'vxe-icon--arrow-top'\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:"模块-复选列表"},{name:"$switch",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("span",{staticClass:"red"},[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,n=e._self._c||t;return n("div",[n("h2",[e._v(e._s(e.$t("app.aside.nav.install")))]),e._m(0),e._m(1),n("h2",[e._v("CDN")]),e._m(2),e._m(3)])},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return 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")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return 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\n // 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal\n Vue.prototype.$modal = VXETable.modal\n ")]),e._v("\n ")])},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://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(" 获取到最新版本的资源，并在页面上引入即可")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return 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("span",{staticClass:"red"},[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,u=n("2877"),m=Object(u["a"])(d,a,l,!1,null,null,null);t["default"]=m.exports},"8dea":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(e._s(e.$t("app.aside.nav.global")))]),e._m(0)])},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import VXETable from 'vxe-table'\n\n VXETable.setup({\n // size: null, // 全局尺寸\n // zIndex: 100, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡\n // version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据\n // table: {\n // showHeader: true,\n // keepSource: false,\n // animat: true,\n // cloak: false,\n // delayHover: 250,\n // showOverflow: null,\n // showHeaderOverflow: null,\n // showFooterOverflow: null,\n // size: null,\n // resizable: false,\n // stripe: false,\n // border: false,\n // round: false,\n // radioConfig: {\n // trigger: 'default'\n // },\n // checkboxConfig: {\n // trigger: 'default'\n // },\n // sortConfig: {\n // remote: false,\n // trigger: 'default',\n // orders: ['asc', 'desc', null],\n // sortMethod: null\n // },\n // filterConfig: {\n // remote: false,\n // filterMethod: null\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 // enterable: false\n // },\n // editConfig: {\n // mode: 'cell'\n // },\n // contextMenu: {\n // visibleMethod () {}\n // },\n // rowId: '_XID', // 行数据的唯一主键字段名\n // importConfig: {\n // modes: ['insert', 'covering']\n // },\n // exportConfig: {\n // isPrint: true,\n // modes: ['current', 'selected']\n // },\n // customConfig: {\n // storage: false\n // },\n // scrollX: {\n // gt: 60\n // },\n // scrollY: {\n // gt: 100\n // }\n // },\n // grid: {\n // size: null,\n // zoomConfig: {\n // escRestore: true\n // },\n // pagerConfig: {\n // perfect: false\n // },\n // toolbar: {\n // perfect: false\n // },\n // proxyConfig: {\n // autoLoad: true,\n // message: true,\n // props: {\n // list: null, // 用于列表，读取响应数据\n // result: 'result', // 用于分页，读取响应数据\n // total: 'page.total' // 用于分页，读取总条数\n // }\n // beforeItem: null,\n // beforeColumn: null,\n // beforeQuery: null,\n // afterQuery: null,\n // beforeDelete: null,\n // afterDelete: null,\n // beforeSave: null,\n // afterSave: null\n // }\n // },\n // pager: {\n // size: null,\n // autoHidden: false,\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 // form: {\n // size: null,\n // colon: false\n // },\n // input: {\n // size: null,\n // transfer: false\n // parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',\n // labelFormat: '',\n // valueFormat: '',\n // startWeek: 1,\n // digits: 2\n // },\n // textarea: {\n // size: null\n // autosize: {\n // minRows: 1,\n // maxRows: 10\n // }\n // },\n // select: {\n // size: null,\n // transfer: false\n // },\n // toolbar: {\n // size: null,\n // import: {\n // mode: 'covering'\n // },\n // export: {\n // types: ['csv', 'html', 'xml', 'txt']\n // },\n // custom: {\n // isFooter: true\n // },\n // buttons: []\n // },\n // button: {\n // size: null,\n // transfer: false\n // },\n // radio: {\n // size: null\n // },\n // checkbox: {\n // size: null\n // },\n // switch: {\n // size: null\n // },\n // modal: {\n // // size: null,\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 // storage: false\n // },\n // list: {\n // scrollY: {\n // gt: 100\n // }\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},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(e._s(e.$t("app.aside.nav.i18n")))]),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("集成国际化")]),n("p",{staticClass:"tip"},[e._v("若希望在项目中支持全局自动翻译，可以通过全局参数开启（将对列头、校验提示..进行自动翻译）")]),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(1),e._m(2)])},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("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 // translate (key) {\n // // 例如，只翻译 \"app.\" 开头的键值\n // if (key && key.indexOf('app.') > -1) {\n // return i18n.t(key)\n // }\n // return key\n // },\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 // 对组件内置的提示语进行国际化翻译\n i18n: key => i18n.t(key)\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("08d8"),n("2877")),d=Object(c["a"])(o,a,l,!1,null,"1ff3db03",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(e._s(e.$t("app.aside.nav.commands")))]),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) => {\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) => {\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("span",{staticClass:"red"},[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, _columnIndex, 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, _columnIndex }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 表尾单元格导出函数"),n("br")],1),n("vxe-table",{attrs:{border:"","show-overflow":"",data:e.tableData,"edit-config":{trigger:"click",mode:"row"}}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"address2",title:"简单输入框","edit-render":{name:"MyInput"}}}),n("vxe-table-column",{attrs:{field:"name",title:"下拉表格","edit-render":{name:"EditDownTable",props:{checkField:"name"}}}}),n("vxe-table-column",{attrs:{field:"nickname",title:"Nickname","edit-render":{name:"EditPopupModal"}}}),n("vxe-table-column",{attrs:{field:"address",title:"文本域","edit-render":{name:"EditDownTextarea"}}}),n("vxe-table-column",{attrs:{field:"role",title:"复杂渲染","edit-render":{name:"EditDownModal",props:{checkField:"role"}}}})],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 show-overflow\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="address2" title="简单输入框" :edit-render="{name: \'MyInput\'}"></vxe-table-column>\n <vxe-table-column field="name" title="下拉表格" :edit-render="{name: \'EditDownTable\', props: {checkField: \'name\'}}"></vxe-table-column>\n <vxe-table-column field="nickname" title="Nickname" :edit-render="{name: \'EditPopupModal\'}"></vxe-table-column>\n <vxe-table-column field="address" title="文本域" :edit-render="{name: \'EditDownTextarea\'}"></vxe-table-column>\n <vxe-table-column field="role" title="复杂渲染" :edit-render="{name: \'EditDownModal\', props: {checkField: \'role\'}}"></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(e._s(e.$t("app.aside.nav.formats")))]),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("span",{staticClass:"red"},[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, columnIndex, columnIndex, $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"),e._v(" filterResetMethod ("),n("vxe-tooltip",{attrs:{content:"{ options, column }",enterable:""}},[n("i",{staticClass:"fa fa-question-circle"})]),e._v("params) 筛选重置函数"),n("br"),e._v(" $panel 对象:"),n("br"),e._v(" "),n("span",{staticClass:"orange"},[e._v("changeOption(event, checked, option) 更新选项的状态")]),n("br"),e._v(" "),n("span",{staticClass:"orange"},[e._v("confirmFilter() 确认筛选")]),n("br"),e._v(" "),n("span",{staticClass:"orange"},[e._v("resetFilter() 清除筛选条件")])],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:"FilterInput"}}}),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:"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('FilterInput', {\n // 筛选模板\n renderFilter (h, renderOpts, params) {\n return [\n <filter-input params={ params }></filter-input>\n ]\n },\n // 筛选方法\n filterMethod ({ option, row, column }) {\n const { data } = option\n const cellValue = XEUtils.get(row, column.property)\n return XEUtils.toString(cellValue).indexOf(data) > -1\n }\n })\n ",'\n <vxe-table\n border\n height="400"\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="nickname" title="Nickname" :filters="[{data: null}]" :filter-render="{name: \'FilterInput\'}"></vxe-table-column>\n <vxe-table-column field="name" title="实现条件的筛选" :filters="[{data: {type: \'has\', isCase: true, name: \'\'}}]" :filter-render="{name: \'FilterComplex\'}"></vxe-table-column>\n <vxe-table-column field="age" title="实现内容的筛选" :filters="[{data: {vals: [], sVal: \'\'}}]" :filter-render="{name: \'FilterContent\'}"></vxe-table-column>\n <vxe-table-column field="role" title="实现Excel复杂的筛选" sortable :filters="[{data: {vals: [], sVal: \'\', fMenu: \'\', f1Type:\'\', f1Val: \'\', fMode: \'and\', f2Type: \'\', f2Val: \'\'}}]" :filter-render="{name: \'FilterExcel\'}"></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, 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,n=e._self._c||t;return n("div",[n("h2",[e._v(e._s(e.$t("app.aside.nav.use")))]),e._m(0),e._m(1),n("h2",[e._v("Import on demand 按需引入")]),e._m(2),e._m(3),n("p",{staticClass:"tip"},[e._v("最后这样按需引入模块，就可以减小体积了")]),n("div",[e._v("src/plugins/utils.js")]),e._m(4),n("div",[e._v("src/plugins/table.js")]),e._m(5),n("div",[e._v("main.js")]),e._m(6)])},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",{staticClass:"tip"},[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")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return 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\n // 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal\n Vue.prototype.$modal = VXETable.modal\n ")]),e._v("\n ")])},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/babel-plugin-import",target:"_blank"}},[e._v("babel-plugin-import")]),e._v(" 可以实现按需加载模块，减少文件体积。然后在文件 .babelrc 中配置")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return 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 ")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import 'xe-utils'\n ")]),e._v("\n ")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import Vue from 'vue'\n import XEUtils from 'xe-utils'\n import {\n VXETable,\n Table,\n Column,\n Header,\n Footer,\n Filter,\n Edit,\n Menu,\n Export,\n Keyboard,\n Validator,\n\n Grid,\n Toolbar,\n Pager,\n Checkbox,\n Radio,\n Input,\n Textarea,\n Button,\n Modal,\n Tooltip,\n Form,\n Select,\n Switch,\n List\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(Edit)\n Vue.use(Menu)\n Vue.use(Export)\n Vue.use(Keyboard)\n Vue.use(Validator)\n\n Vue.use(Tooltip)\n Vue.use(Grid)\n Vue.use(Toolbar)\n Vue.use(Pager)\n Vue.use(Form)\n Vue.use(Checkbox)\n Vue.use(Radio)\n Vue.use(Switch)\n Vue.use(Input)\n Vue.use(Select)\n Vue.use(Button)\n Vue.use(Modal)\n Vue.use(List)\n\n // 再安装核心库\n Vue.use(Table)\n\n // 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal\n Vue.prototype.$modal = VXETable.modal\n ")]),e._v("\n ")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import './plugins/utils'\n import './plugins/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}}]); |