lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
f770259090a1ffbe7eb0d00a2e7b1bc311a2f813
vxe-table/docs/static/js/start.0bc27c8b.js
xuliangzhan f770259090 更新文档
2020-02-10 14:45:08 +08:00

1 line
62 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
(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),o={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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"}}),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),o={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)}}},i=o,c=n("2877"),d=Object(c["a"])(i,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),o={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)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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),o={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)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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"}}),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),o=n("1487"),i=n.n(o),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){i.a.highlightBlock(e)}))}},d=c,m=n("2877"),u=Object(m["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},"441a":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Custom Icons 自定义图标")]),n("p",{staticClass:"tip"},[e._v("如果项目已有适合的图标，例如 "),n("a",{staticClass:"link",attrs:{href:"https://www.npmjs.com/package/font-awesome",target:"_black"}},[e._v("font-awesome")]),e._v(" 图标库，可通过配置替换并自行调整相关的样式即可")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import VXETable from 'vxe-table'\n\n VXETable.setup({\n icon: {\n sortAsc: 'vxe-icon--caret-top',\n sortDesc: 'vxe-icon--caret-bottom',\n filterNone: 'vxe-icon--funnel',\n filterMatch: 'vxe-icon--funnel',\n edit: 'vxe-icon--edit-outline',\n treeLoaded: 'vxe-icon--refresh roll',\n treeOpen: 'vxe-icon--caret-right rotate90',\n treeClose: 'vxe-icon--caret-right',\n expandLoaded: 'vxe-icon--refresh roll',\n expandOpen: 'vxe-icon--arrow-right rotate90',\n expandClose: 'vxe-icon--arrow-right',\n refresh: 'vxe-icon--refresh',\n refreshLoading: 'vxe-icon--refresh roll',\n formPrefix: 'vxe-icon--question',\n 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--zoomin',\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),o={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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),o={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)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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"}}),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),o={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)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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),o={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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"}}),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),o=n("1487"),i=n.n(o),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){i.a.highlightBlock(e)}))},methods:{btnClickEvent:function(e){switch(e.code){case"query":this.$refs.xGrid.commitProxy(e.code);break}}}},d=c,m=n("2877"),u=Object(m["a"])(d,a,l,!1,null,null,null);t["default"]=u.exports},"8dea":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement;e._self._c;return e._m(0)},l=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("size")]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v("\n 每个组件都有 size 属性，默认是继承父组件，所以只要给局部的父组件设置 size，所有后代组件一律继承，该功能对于很多场景中都非常有用\n ")]),e._v("\n ")]),n("h2",[e._v("Default Global Props")]),n("pre",[e._v(" "),n("code",{staticClass:"javascript"},[e._v("\n import VXETable from 'vxe-table'\n\n VXETable.setup({\n // 表格的全局参数\n size: 'small',\n showOverflow: null,\n showHeaderOverflow: null,\n align: null,\n headerAlign: null,\n stripe: false,\n border: false,\n resizable: false,\n showHeader: true,\n highlightCurrentRow: false,\n highlightHoverRow: false,\n highlightCurrentColumn: false,\n highlightHoverColumn: false,\n 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 remember: false,\n animat: true\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),o={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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),o={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)}))}},i=o,c=(n("22f84"),n("2877")),d=Object(c["a"])(i,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),o={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)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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"}}),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),o={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 editExportMethod ({ row, column }) {\n return `值为：${row[column.property]}`\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)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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"}}),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),o={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)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,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),o={mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){s.a.highlightBlock(e)}))}},i=o,c=n("2877"),d=Object(c["a"])(i,a,l,!1,null,null,null);t["default"]=d.exports}}]);
Reference in New Issue View Git Blame Copy Permalink