(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["start"],{"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},"22f84":function(e,t,n){"use strict";var a=n("9492"),l=n.n(a);l.a},"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(" renderDefault (h, renderOpts, params, context) 渲染函数"),n("br"),e._v(" cellExportMethod (params) 导出值格式化函数"),n("br"),n("span",{staticClass:"green"},[e._v("参数说明 params = { row, column }")]),n("br"),n("span",{staticClass:"red"},[e._v("（注：实际开发中应该将业务封装成一个组件，不要把复杂的渲染逻辑写在渲染器中）")])],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="{body: {options: bodyMenus}}"\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              bodyMenus: [\n                [\n                  {\n                    code: 'exportData',\n                    name: '导出.csv'\n                  },\n                  {\n                    code: 'insert',\n                    name: '新增',\n                    record: {\n                      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:"item-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(" renderItem (h, renderOpts, params, context) 项"),n("br"),n("span",{staticClass:"green"},[e._v("参数说明 params = { data, property }")]),n("br"),n("span",{staticClass:"red"},[e._v("（注：实际开发中应该将业务封装成一个组件，不要把复杂的渲染逻辑写在渲染器中）")])],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, context) {\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,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;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          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          caretBottom: 'vxe-icon--caret-bottom',\n          dropdownBottom: '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("渲染器和插槽对比")]),e._m(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)],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"},[n("span",{staticClass:"orange"},[e._v("渲染器：抽象一切可复用的功能（类似组件的概念），实现非常简单的可配置化；")]),n("br"),n("span",{staticClass:"orange"},[e._v("插槽：自定义程度高，但需要重复写冗余代码，比较繁琐；")]),n("br"),n("span",{staticClass:"red"},[e._v("建议通过 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{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, params, context) 空内容"),n("br"),n("span",{staticClass:"green"},[e._v("参数说明 params = {}")]),n("br"),n("span",{staticClass:"red"},[e._v("（注：实际开发中应该将业务封装成一个组件，不要把复杂的渲染逻辑写在渲染器中）")])],1),n("vxe-table",{attrs:{border:"",resizable:"",height:"400","empty-render":{name:"NotData"}}},[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          <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.2+")]),e._v(" "),n("a",{staticClass:"link",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"),n("span",{staticClass:"red"},[e._v("（注：如果是 IE 浏览器可以使用 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/babel-polyfill"}},[e._v("babel-polyfill")]),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, params, context) 按钮"),n("br"),n("span",{staticClass:"green"},[e._v("参数说明 params = { button }")]),n("br"),n("span",{staticClass:"red"},[e._v("（注：实际开发中应该将业务封装成一个组件，不要把复杂的渲染逻辑写在渲染器中）")])],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, context) {\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;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        export: {}, // 导出默认参数\n        import: {}, // 导入默认参数\n        zIndex: 100, // 全局 zIndex 起始值\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        },\n        exportConfig: {\n          types: ['csv', 'html', 'xml', 'txt']\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 ({ type, options, column }) {\n            return true\n          }\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        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          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},9492:function(e,t,n){},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-TW.js",target:"_blank"}},[e._v("繁体中文（zh-TW）")])]),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("22f84"),n("2877")),d=Object(c["a"])(o,a,l,!1,null,"883ad2ee",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  ")])],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(" 默认支持原生的：input、textarea、select"),n("br"),e._v(" 配置参数："),n("br"),e._v(" autofocus 自动聚焦的类名"),n("br"),e._v(" renderEdit (h, renderOpts, params, context) 编辑的渲染函数"),n("br"),e._v(" renderCell (h, renderOpts, params, context) 显示的渲染函数"),n("br"),e._v(" editExportMethod (params) 导出值格式化函数"),n("br"),n("span",{staticClass:"green"},[e._v("参数说明 params = { row, column }")]),n("br"),n("span",{staticClass:"red"},[e._v("（注：实际开发中应该将业务封装成一个组件，不要把复杂的渲染逻辑写在渲染器中）")])],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" value={ row[column.property] } onInput={ evnt => { row[column.property] = evnt.target.value }}/>\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},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(" 默认支持原生的：input、textarea、select"),n("br"),e._v(" 配置参数："),n("br"),e._v(" className 自定义容器的 className"),n("br"),e._v(" isFooter 是否显示底部按钮"),n("br"),e._v(" renderFilter (h, renderOpts, params, context) 渲染函数"),n("br"),e._v(" filterMethod ({ option, row, column }) 筛选函数"),n("br"),n("span",{staticClass:"green"},[e._v("参数说明 params = { column }")]),n("br"),n("span",{staticClass:"red"},[e._v("（注：实际开发中应该将业务封装成一个组件，不要把复杂的渲染逻辑写在渲染器中）")])],1),n("vxe-table",{attrs:{border:"",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:"age",title:"Age",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:"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, context) {\n            return [\n              <filter-complex params={ params } context={ context }></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 { option } = this\n              const checked = !!option.data\n              this.context.changeOption(null, checked, option)\n            }\n          }\n        }\n        ",'\n        <vxe-table border :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, 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},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("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        Loading,\n        Tooltip,\n        Grid,\n        Menu,\n        Toolbar,\n        Pager,\n        Form,\n        Checkbox,\n        Radio,\n        Input,\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(Loading)\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(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}}]);