Files
vxe-table/docs/static/js/plugin.c112c72f.js
xuliangzhan 162f3082ad 优化重构
2020-03-28 18:31:17 +08:00

1 line
118 KiB
JavaScript

(window["webpackJsonpVXETable"]=window["webpackJsonpVXETable"]||[]).push([["plugin"],{"075b":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",[e._m(0),n("vxe-grid",{ref:"xGrid",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row"}},on:{"checkbox-change":e.checkboxChangeEvent,"checkbox-all":e.checkboxChangeEvent},scopedSlots:e._u([{key:"top",fn:function(){return[n("a-alert",{attrs:{type:"warning",message:"已选择 "+e.selectRecords.length+" 项",banner:""}})]},proxy:!0},{key:"buttons",fn:function(){return[n("el-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("el-button",{on:{click:e.saveEvent}},[e._v("保存")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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-antd",target:"_blank"}},[e._v("vxe-table-plugin-antd")]),e._v(" 插件的 API")])}],l=(n("99af"),n("4de4"),n("4160"),n("a630"),n("c975"),n("fb6a"),n("3ca3"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{loading:!1,tableData:[],selectRecords:[],tableColumn:[{type:"checkbox",width:60},{type:"seq",title:"Number",width:80},{field:"name",title:"AInput",minWidth:140,editRender:{name:"AInput"}},{field:"role",title:"AAutoComplete",width:160,editRender:{name:"AAutoComplete",props:{dataSource:[]},events:{search:this.roleSearchEvent}}},{field:"age",title:"AInputNumber",width:160,editRender:{name:"AInputNumber",props:{max:35,min:18}}},{field:"sex",title:"ASelect",width:140,editRender:{name:"ASelect",options:[]}},{field:"sex1",title:"ASelect",width:160,editRender:{name:"ASelect",options:[],props:{mode:"multiple"}}},{field:"sex2",title:"ASelect",width:140,editRender:{name:"ASelect",optionGroups:[]}},{field:"region",title:"ACascader",width:200,editRender:{name:"ACascader",props:{options:[]}}},{field:"date7",title:"ADatePicker",width:140,editRender:{name:"ADatePicker",props:{type:"date",format:"YYYY/MM/DD"}}},{field:"date8",title:"AMonthPicker",width:140,editRender:{name:"AMonthPicker"}},{field:"date9",title:"AWeekPicker",width:140,editRender:{name:"AWeekPicker"}},{field:"date11",title:"ARangePicker",width:140,editRender:{name:"ARangePicker"}},{field:"date10",title:"ATimePicker",width:140,editRender:{name:"ATimePicker"}},{field:"attr1",title:"ATreeSelect",width:140,editRender:{name:"ATreeSelect",props:{treeData:[]}}},{field:"attr2",title:"ATreeSelect",width:140,editRender:{name:"ATreeSelect",props:{treeData:[],treeCheckable:!0}}},{field:"flag",title:"ASwitch",width:100,editRender:{name:"ASwitch",type:"visible"}},{field:"rate",title:"ARate",width:200,editRender:{name:"ARate",type:"visible"}}],tableToolbar:{},restaurants:["前端","后端","开发","测试"],demoCodes:['\n <vxe-grid\n border\n show-overflow\n ref="xGrid"\n height="460"\n :loading="loading"\n :data="tableData"\n :columns="tableColumn"\n :toolbar="tableToolbar"\n :edit-config="{trigger: \'click\', mode: \'row\'}"\n @checkbox-change="checkboxChangeEvent"\n @checkbox-all="checkboxChangeEvent">\n <template v-slot:top>\n <a-alert type="warning" :message="`已选择 ${selectRecords.length} 项`" banner></a-alert>\n </template>\n <template v-slot:buttons>\n <el-button @click="insertEvent">新增</el-button>\n <el-button @click="saveEvent">保存</el-button>\n </template>\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n selectRecords: [],\n tableColumn: [\n { type: 'checkbox', width: 60 },\n { type: 'seq', title: 'Number', width: 80 },\n { field: 'name', title: 'AInput', minWidth: 140, editRender: { name: 'AInput' } },\n { field: 'role', title: 'AAutoComplete', width: 160, editRender: { name: 'AAutoComplete', props: { dataSource: [] }, events: { search: this.roleSearchEvent } } },\n { field: 'age', title: 'AInputNumber', width: 160, editRender: { name: 'AInputNumber', props: { max: 35, min: 18 } } },\n { field: 'sex', title: 'ASelect', width: 140, editRender: { name: 'ASelect', options: [] } },\n { field: 'sex1', title: 'ASelect', width: 160, editRender: { name: 'ASelect', options: [], props: { mode: 'multiple' } } },\n { field: 'sex2', title: 'ASelect', width: 140, editRender: { name: 'ASelect', optionGroups: [] } },\n { field: 'region', title: 'ACascader', width: 200, editRender: { name: 'ACascader', props: { options: [] } } },\n { field: 'date7', title: 'ADatePicker', width: 140, editRender: { name: 'ADatePicker', props: { type: 'date', format: 'YYYY/MM/DD' } } },\n { field: 'date8', title: 'AMonthPicker', width: 140, editRender: { name: 'AMonthPicker' } },\n { field: 'date9', title: 'AWeekPicker', width: 140, editRender: { name: 'AWeekPicker' } },\n { field: 'date11', title: 'ARangePicker', width: 140, editRender: { name: 'ARangePicker' } },\n { field: 'date10', title: 'ATimePicker', width: 140, editRender: { name: 'ATimePicker' } },\n { field: 'attr1', title: 'ATreeSelect', width: 140, editRender: { name: 'ATreeSelect', props: { treeData: [] } } },\n { field: 'attr2', title: 'ATreeSelect', width: 140, editRender: { name: 'ATreeSelect', props: { treeData: [], treeCheckable: true } } },\n { field: 'flag', title: 'ASwitch', width: 100, editRender: { name: 'ASwitch', type: 'visible' } },\n { field: 'rate', title: 'ARate', width: 200, editRender: { name: 'ARate', type: 'visible' } }\n ],\n tableToolbar: {},\n restaurants: ['前端', '后端', '开发', '测试']\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n this.loading = false\n }, 500)\n this.findSexList()\n this.findRegionList()\n this.findSexGroupList()\n this.findTreeSelectList()\n },\n methods: {\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.tableColumn[5].editRender.options = data\n this.tableColumn[6].editRender.options = data\n })\n },\n findRegionList () {\n return XEAjax.get('/api/conf/region/list').then(data => {\n this.tableColumn[8].editRender.props.options = data\n })\n },\n findSexGroupList () {\n let sexGroupList = [\n {\n label: '分组1',\n options: [\n {\n label: '男',\n value: '1'\n }\n ]\n },\n {\n label: '分组2',\n options: [\n {\n label: '女',\n value: '0'\n }\n ]\n }\n ]\n this.tableColumn[7].editRender.optionGroups = sexGroupList\n },\n findTreeSelectList () {\n let treeData = [{\n title: 'Node1',\n value: '0-0',\n key: '0-0',\n children: [{\n title: 'Child Node1',\n value: '0-0-0',\n key: '0-0-0'\n }]\n }, {\n title: 'Node2',\n value: '0-1',\n key: '0-1',\n children: [{\n title: 'Child Node3',\n value: '0-1-0',\n key: '0-1-0',\n disabled: true\n }, {\n title: 'Child Node4',\n value: '0-1-1',\n key: '0-1-1'\n }, {\n title: 'Child Node5',\n value: '0-1-2',\n key: '0-1-2'\n }]\n }]\n this.tableColumn[14].editRender.props.treeData = treeData\n this.tableColumn[15].editRender.props.treeData = treeData\n },\n insertEvent () {\n let xGrid = this.$refs.xGrid\n let record = {\n role: '',\n age: 18,\n sex1: [],\n region: [],\n flag: false,\n rate: 2\n }\n xGrid.insert(record).then(({ row }) => xGrid.setActiveRow(row))\n },\n saveEvent () {\n let { insertRecords, removeRecords, updateRecords } = this.$refs.xGrid.getRecordset()\n if (insertRecords.length || removeRecords.length || updateRecords.length) {\n this.$alert(`insertRecords=${insertRecords.length}; removeRecords=${removeRecords.length}; updateRecords=${updateRecords.length}`)\n } else {\n this.$alert('数据未改动!')\n }\n },\n roleSearchEvent ({ row }, value) {\n let dataSource = this.restaurants.filter(option => option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1)\n this.tableColumn[3].editRender.props.dataSource = dataSource\n },\n checkboxChangeEvent () {\n this.selectRecords = this.$refs.xGrid.getCheckboxRecords()\n }\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,10),e.loading=!1}),500),this.findSexList(),this.findRegionList(),this.findSexGroupList(),this.findTreeSelectList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){e.tableColumn[5].editRender.options=t,e.tableColumn[6].editRender.options=t}))},findRegionList:function(){var e=this;return r.a.get("/api/conf/region/list").then((function(t){e.tableColumn[8].editRender.props.options=t}))},findSexGroupList:function(){var e=[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}];this.tableColumn[7].editRender.optionGroups=e},findTreeSelectList:function(){var e=[{title:"Node1",value:"0-0",key:"0-0",children:[{title:"Child Node1",value:"0-0-0",key:"0-0-0"}]},{title:"Node2",value:"0-1",key:"0-1",children:[{title:"Child Node3",value:"0-1-0",key:"0-1-0",disabled:!0},{title:"Child Node4",value:"0-1-1",key:"0-1-1"},{title:"Child Node5",value:"0-1-2",key:"0-1-2"}]}];this.tableColumn[14].editRender.props.treeData=e,this.tableColumn[15].editRender.props.treeData=e},insertEvent:function(){var e=this.$refs.xGrid,t={role:"",age:18,sex1:[],region:[],flag:!1,rate:2};e.insert(t).then((function(t){var n=t.row;return e.setActiveRow(n)}))},saveEvent:function(){var e=this.$refs.xGrid.getRecordset(),t=e.insertRecords,n=e.removeRecords,a=e.updateRecords;t.length||n.length||a.length?this.$alert("insertRecords=".concat(t.length,"; removeRecords=").concat(n.length,"; updateRecords=").concat(a.length)):this.$alert("数据未改动!")},roleSearchEvent:function(e,t){var n=this.restaurants.filter((function(e){return-1!==e.toUpperCase().indexOf((t||"").toUpperCase())}));this.tableColumn[3].editRender.props.dataSource=n},checkboxChangeEvent:function(){this.selectRecords=this.$refs.xGrid.getCheckboxRecords()}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},"0f7c":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",[e._m(0),n("vxe-form",{attrs:{data:e.formData,"title-width":"120","title-align":"right"},on:{submit:e.searchEvent,reset:e.searchEvent}},[n("vxe-form-item",{attrs:{field:"name",title:"ElInput",span:"8","title-prefix":{message:"帮助信息!!!",icon:"fa fa-exclamation-circle"},"item-render":{name:"ElInput"}}}),n("vxe-form-item",{attrs:{field:"role",title:"ElAutocomplete",span:"8","item-render":{name:"ElAutocomplete",props:{fetchSuggestions:e.roleFetchSuggestions}}}}),n("vxe-form-item",{attrs:{field:"age",title:"ElInputNumber",span:"8","item-render":{name:"ElInputNumber"}}}),n("vxe-form-item",{attrs:{field:"sex",title:"ElSelect",span:"8","item-render":{name:"ElSelect",options:e.sexList}}}),n("vxe-form-item",{attrs:{field:"region",title:"ElCascader",span:"8","item-render":{name:"ElCascader",props:{options:e.regionList}}}}),n("vxe-form-item",{attrs:{field:"date",title:"ElDatePicker",span:"8","item-render":{name:"ElDatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-form-item",{attrs:{field:"date5",title:"ElTimeSelect",span:"8",folding:"","item-render":{name:"ElTimeSelect",props:{pickerOptions:{start:"08:30",step:"00:15",end:"18:30"}}}}}),n("vxe-form-item",{attrs:{field:"flag",title:"ElSwitch",span:"8",folding:"","item-render":{name:"ElSwitch"}}}),n("vxe-form-item",{attrs:{field:"slider",title:"ElSlider",span:"8",folding:"","item-render":{name:"ElSlider"}}}),n("vxe-form-item",{attrs:{field:"rate",title:"ElRate",span:"8",folding:"","item-render":{name:"ElRate"}}}),n("vxe-form-item",{attrs:{field:"flag1",title:"ElRadio",span:"8",folding:"","item-render":{name:"ElRadio",options:[{label:"是",value:"Y"},{label:"否",value:"N"}]}}}),n("vxe-form-item",{attrs:{field:"checkedList",title:"ElCheckbox",span:"8",folding:"","visible-method":e.visibleMethod,"item-render":{name:"ElCheckbox",options:[{label:"北京",value:"beijing"},{label:"深圳",value:"shenzhen"},{label:"上海",value:"shanghai"}]}}}),n("vxe-form-item",{attrs:{span:"24",align:"center","collapse-node":"","item-render":{name:"ElButtons",children:[{content:"查询",props:{type:"primary",nativeType:"submit"}},{content:"重置",props:{nativeType:"reset"}}]}}})],1),n("vxe-toolbar",{attrs:{export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("el-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("el-button",{on:{click:e.saveEvent}},[e._v("保存")]),n("el-button",{on:{click:e.vaildEvent}},[e._v("校验")]),n("el-dropdown",{on:{command:e.dropdownMenuEvent}},[n("el-button",[e._v(" 操作"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"remove"}},[e._v("删除选中")]),n("el-dropdown-item",{attrs:{command:"export"}},[e._v("导出数据")])],1)],1)]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","highlight-hover-row":"","export-config":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row"}},on:{"edit-actived":e.editActivedEvent,"edit-closed":e.editClosedEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{type:"seq",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"ElInput","min-width":"140",fixed:"left","edit-render":{name:"ElInput"}}}),n("vxe-table-column",{attrs:{field:"role",title:"ElAutocomplete",width:"160","edit-render":{name:"ElAutocomplete",props:{fetchSuggestions:e.roleFetchSuggestions}}}}),n("vxe-table-column",{attrs:{field:"age",title:"ElInputNumber",width:"160","edit-render":{name:"ElInputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"ElSelect",width:"140","edit-render":{name:"ElSelect",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"sexList",title:"ElSelect multiple",width:"180","edit-render":{name:"ElSelect",options:e.sexList,props:{multiple:!0}}}}),n("vxe-table-column",{attrs:{field:"state",title:"ElSelect remote",width:"140","edit-render":{name:"ElSelect",options:e.stateOptions,props:{remote:!0,filterable:!0,loading:e.stateloading,remoteMethod:e.remoteStateMethod}}}}),n("vxe-table-column",{attrs:{field:"region",title:"ElCascader",width:"200","edit-render":{name:"ElCascader",props:{options:e.regionList}}}}),n("vxe-table-column",{attrs:{field:"date",title:"ElDatePicker",width:"200","edit-render":{name:"ElDatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-table-column",{attrs:{field:"date1",title:"ElDatePicker",width:"220","edit-render":{name:"ElDatePicker",props:{type:"datetime",format:"yyyy-MM-dd HH:mm:ss"}}}}),n("vxe-table-column",{attrs:{field:"date5",title:"ElTimeSelect",width:"200","edit-render":{name:"ElTimeSelect",props:{pickerOptions:{start:"08:30",step:"00:15",end:"18:30"}}}}}),n("vxe-table-column",{attrs:{field:"flag",title:"ElSwitch",width:"100","edit-render":{name:"ElSwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{field:"slider",title:"ElSlider",width:"200","edit-render":{name:"ElSlider",type:"visible"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"ElRate",width:"200",fixed:"right","edit-render":{name:"ElRate",type:"visible"}}})],1),n("el-pagination",{attrs:{"current-page":e.tablePage.currentPage,"page-sizes":[5,10,15,20,50,100,150,200],"page-size":e.tablePage.pageSize,layout:"total, sizes, prev, pager, next, jumper",total:e.tablePage.totalResult},on:{"size-change":e.handleSizeChange,"current-change":e.handleCurrentChange}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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/element-ui"}},[e._v("element-ui")]),e._v(" 组合渲染 + 使用分页")])}],l=(n("99af"),n("4de4"),n("4160"),n("a630"),n("c975"),n("d81d"),n("45fc"),n("b0c0"),n("ac1f"),n("3ca3"),n("5319"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{loading:!1,tableData:[],validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],sex:[{required:!0,message:"性别必须填写"}]},sexList:[],regionList:[],stateList:[],stateOptions:[],stateloading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"],restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"}],tablePage:{currentPage:1,pageSize:10,totalResult:0},formData:{name:"",role:"",sex:null,age:null,region:[],date:null,date5:null,flag:!1,slider:0,rate:0,flag1:"",checkedList:[]},demoCodes:['\n <vxe-form :data="formData" title-width="120" title-align="right" @submit="searchEvent" @reset="searchEvent">\n <vxe-form-item field="name" title="ElInput" span="8" :title-prefix="{ message: \'帮助信息!!!\', icon: \'fa fa-exclamation-circle\' }" :item-render="{name: \'ElInput\'}"></vxe-form-item>\n <vxe-form-item field="role" title="ElAutocomplete" span="8" :item-render="{name: \'ElAutocomplete\', props: {fetchSuggestions: roleFetchSuggestions}}"></vxe-form-item>\n <vxe-form-item field="age" title="ElInputNumber" span="8" :item-render="{name: \'ElInputNumber\'}"></vxe-form-item>\n <vxe-form-item field="sex" title="ElSelect" span="8" :item-render="{name: \'ElSelect\', options: sexList}"></vxe-form-item>\n <vxe-form-item field="region" title="ElCascader" span="8" :item-render="{name: \'ElCascader\', props: {options: regionList}}"></vxe-form-item>\n <vxe-form-item field="date" title="ElDatePicker" span="8" :item-render="{name: \'ElDatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-form-item>\n <vxe-form-item field="date5" title="ElTimeSelect" span="8" folding :item-render="{name: \'ElTimeSelect\', props: {pickerOptions: {start: \'08:30\', step: \'00:15\', end: \'18:30\'}}}"></vxe-form-item>\n <vxe-form-item field="flag" title="ElSwitch" span="8" folding :item-render="{name: \'ElSwitch\'}"></vxe-form-item>\n <vxe-form-item field="slider" title="ElSlider" span="8" folding :item-render="{name: \'ElSlider\'}"></vxe-form-item>\n <vxe-form-item field="rate" title="ElRate" span="8" folding :item-render="{name: \'ElRate\'}"></vxe-form-item>\n <vxe-form-item field="flag1" title="ElRadio" span="8" folding :item-render="{name: \'ElRadio\', options: [{label: \'是\', value: \'Y\'}, {label: \'否\', value: \'N\'}]}"></vxe-form-item>\n <vxe-form-item field="checkedList" title="ElCheckbox" span="8" folding :visible-method="visibleMethod" :item-render="{name: \'ElCheckbox\', options: [{label: \'北京\', value: \'beijing\'}, {label: \'深圳\', value: \'shenzhen\'}, {label: \'上海\', value: \'shanghai\'}]}"></vxe-form-item>\n <vxe-form-item span="24" align="center" collapse-node :item-render="{name: \'ElButtons\', children: [{ content: \'查询\', props: {type: \'primary\', nativeType: \'submit\'} }, { content: \'重置\', props: {nativeType: \'reset\'} }]}"></vxe-form-item>\n </vxe-form>\n\n <vxe-toolbar export custom>\n <template v-slot:buttons>\n <el-button @click="insertEvent">新增</el-button>\n <el-button @click="saveEvent">保存</el-button>\n <el-button @click="vaildEvent">校验</el-button>\n <el-dropdown @command="dropdownMenuEvent">\n <el-button>\n 操作<i class="el-icon-arrow-down el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item command="remove">删除选中</el-dropdown-item>\n <el-dropdown-item command="export">导出数据</el-dropdown-item>\n </el-dropdown-menu>\n </el-dropdown>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n resizable\n show-overflow\n highlight-hover-row\n export-config\n ref="xTable"\n height="460"\n :loading="loading"\n :data="tableData"\n :edit-rules="validRules"\n :edit-config="{trigger: \'click\', mode: \'row\'}"\n @edit-actived="editActivedEvent"\n @edit-closed="editClosedEvent">\n <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column field="name" title="ElInput" min-width="140" fixed="left" :edit-render="{name: \'ElInput\'}"></vxe-table-column>\n <vxe-table-column field="role" title="ElAutocomplete" width="160" :edit-render="{name: \'ElAutocomplete\', props: {fetchSuggestions: roleFetchSuggestions}}"></vxe-table-column>\n <vxe-table-column field="age" title="ElInputNumber" width="160" :edit-render="{name: \'ElInputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column field="sex" title="ElSelect" width="140" :edit-render="{name: \'ElSelect\', options: sexList}"></vxe-table-column>\n <vxe-table-column field="sexList" title="ElSelect multiple" width="180" :edit-render="{name: \'ElSelect\', options: sexList, props: {multiple: true}}"></vxe-table-column>\n <vxe-table-column field="state" title="ElSelect remote" width="140" :edit-render="{name: \'ElSelect\', options: stateOptions, props: {remote: true, filterable: true, loading: stateloading, remoteMethod: remoteStateMethod}}"></vxe-table-column>\n <vxe-table-column field="region" title="ElCascader" width="200" :edit-render="{name: \'ElCascader\', props: {options: regionList}}"></vxe-table-column>\n <vxe-table-column field="date" title="ElDatePicker" width="200" :edit-render="{name: \'ElDatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-table-column>\n <vxe-table-column field="date1" title="ElDatePicker" width="220" :edit-render="{name: \'ElDatePicker\', props: {type: \'datetime\', format: \'yyyy-MM-dd HH:mm:ss\'}}"></vxe-table-column>\n <vxe-table-column field="date5" title="ElTimeSelect" width="200" :edit-render="{name: \'ElTimeSelect\', props: {pickerOptions: {start: \'08:30\', step: \'00:15\', end: \'18:30\'}}}"></vxe-table-column>\n <vxe-table-column field="flag" title="ElSwitch" width="100" :edit-render="{name: \'ElSwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column field="slider" title="ElSlider" width="200" :edit-render="{name: \'ElSlider\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column field="rate" title="ElRate" width="200" fixed="right" :edit-render="{name: \'ElRate\', type: \'visible\'}"></vxe-table-column>\n </vxe-table>\n\n <el-pagination\n @size-change="handleSizeChange"\n @current-change="handleCurrentChange"\n :current-page="tablePage.currentPage"\n :page-sizes="[5, 10, 15, 20, 50, 100, 150, 200]"\n :page-size="tablePage.pageSize"\n layout="total, sizes, prev, pager, next, jumper"\n :total="tablePage.totalResult">\n </el-pagination>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n validRules: {\n name: [\n { required: true, message: '名称必须填写' },\n { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n ],\n sex: [\n { required: true, message: '性别必须填写' }\n ]\n },\n sexList: [],\n regionList: [],\n stateList: [],\n stateOptions: [],\n stateloading: false,\n states: [\n 'Alabama', 'Alaska', 'Arizona',\n 'Arkansas', 'California', 'Colorado',\n 'Connecticut', 'Delaware', 'Florida',\n 'Georgia', 'Hawaii', 'Idaho', 'Illinois',\n 'Indiana', 'Iowa', 'Kansas', 'Kentucky',\n 'Louisiana', 'Maine', 'Maryland',\n 'Massachusetts', 'Michigan', 'Minnesota',\n 'Mississippi', 'Missouri', 'Montana',\n 'Nebraska', 'Nevada', 'New Hampshire',\n 'New Jersey', 'New Mexico', 'New York',\n 'North Carolina', 'North Dakota', 'Ohio',\n 'Oklahoma', 'Oregon', 'Pennsylvania',\n 'Rhode Island', 'South Carolina',\n 'South Dakota', 'Tennessee', 'Texas',\n 'Utah', 'Vermont', 'Virginia',\n 'Washington', 'West Virginia', 'Wisconsin',\n 'Wyoming'\n ],\n restaurants: [\n { value: '前端', name: '前端' },\n { value: '后端', name: '后端' }\n ],\n tablePage: {\n currentPage: 1,\n pageSize: 10,\n totalResult: 0\n },\n formData: {\n name: '',\n role: '',\n sex: null,\n age: null,\n region: [],\n date: null,\n date5: null,\n flag: false,\n slider: 0,\n rate: 0,\n flag1: '',\n checkedList: []\n }\n }\n },\n created () {\n this.stateList = this.states.map(item => {\n return { value: `value:${item}`, label: `label:${item}` }\n })\n this.findList()\n this.findSexList()\n this.findRegionList()\n },\n methods: {\n findList () {\n this.loading = true\n XEAjax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData).then(({ page, result }) => {\n this.tableData = result\n this.tablePage.totalResult = page.totalResult\n this.loading = false\n this.updateStateList()\n }).catch(e => {\n this.loading = false\n })\n },\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.sexList = data\n return data\n })\n },\n findRegionList () {\n return XEAjax.get('/api/conf/region/list').then(data => {\n this.regionList = data\n return data\n })\n },\n remoteStateMethod (query) {\n if (query !== '') {\n this.stateloading = true\n setTimeout(() => {\n this.stateloading = false\n this.stateOptions = this.stateList.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1\n })\n }, 200)\n } else {\n this.stateOptions = []\n }\n },\n // 模拟后台查当前页出远程下拉值\n updateStateList () {\n setTimeout(() => {\n let defaultStateList = []\n this.tableData.forEach(row => {\n if (row.state && !defaultStateList.some(item => item.value === row.state)) {\n defaultStateList.push({\n label: row.state.replace('value', 'label'),\n value: row.state\n })\n }\n })\n this._defaultStateList = defaultStateList\n this.stateOptions = defaultStateList\n }, 100)\n },\n editActivedEvent ({ row }) {\n // 当激活编辑时,重新更新远程下拉值\n if (row.state) {\n if (row._stateOptions) {\n this.stateOptions = row._stateOptions\n } else {\n // 如果是第一次点击则使用默认的列表\n this.stateOptions = this._defaultStateList\n }\n } else {\n this.stateOptions = []\n }\n },\n editClosedEvent ({ row }) {\n // 当激活编辑时,记录当前远程下拉值\n row._stateOptions = this.stateOptions\n },\n insertEvent () {\n let record = {\n role: '',\n age: 18,\n region: [],\n flag: false,\n rate: 2\n }\n this.$refs.xTable.insert(record).then(({ row }) => this.$refs.xTable.setActiveRow(row))\n },\n saveEvent () {\n let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getRecordset()\n if (insertRecords.length || removeRecords.length || updateRecords.length) {\n this.$alert('保存成功!')\n this.searchEvent()\n } else {\n this.$alert('数据未改动!')\n }\n },\n vaildEvent () {\n this.$refs.xTable.validate((errMap) => {\n if (errMap) {\n this.$XModal.message({ status: 'error', message: '校验不通过!' })\n } else {\n this.$XModal.message({ status: 'success', message: '校验成功!' })\n }\n })\n },\n dropdownMenuEvent (name) {\n switch (name) {\n case 'remove': {\n let selectRecords = this.$refs.xTable.getCheckboxRecords()\n if (selectRecords.length) {\n this.$refs.xTable.removeCheckboxRow()\n } else {\n this.$alert('请至少选择一条数据!')\n }\n break\n }\n case 'export': {\n this.$refs.xTable.exportData()\n break\n }\n }\n },\n searchEvent () {\n this.tablePage.currentPage = 1\n this.findList()\n },\n handleSizeChange (pageSize) {\n this.tablePage.pageSize = pageSize\n this.searchEvent()\n },\n handleCurrentChange (currentPage) {\n this.tablePage.currentPage = currentPage\n this.findList()\n },\n visibleMethod ({ data }) {\n return data.flag1 === 'Y'\n },\n roleFetchSuggestions (queryString, cb) {\n var restaurants = this.restaurants\n var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants\n clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n cb(results)\n }, 3000 * Math.random())\n },\n createStateFilter (queryString) {\n return (state) => {\n return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)\n }\n }\n }\n }\n "]}},created:function(){this.stateList=this.states.map((function(e){return{value:"value:".concat(e),label:"label:".concat(e)}})),this.findList(),this.findSexList(),this.findRegionList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,r.a.get("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.formData).then((function(t){var n=t.page,a=t.result;e.tableData=a,e.tablePage.totalResult=n.totalResult,e.loading=!1,e.updateStateList()})).catch((function(){e.loading=!1}))},findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){return e.sexList=t,t}))},findRegionList:function(){var e=this;return r.a.get("/api/conf/region/list").then((function(t){return e.regionList=t,t}))},remoteStateMethod:function(e){var t=this;""!==e?(this.stateloading=!0,setTimeout((function(){t.stateloading=!1,t.stateOptions=t.stateList.filter((function(t){return t.label.toLowerCase().indexOf(e.toLowerCase())>-1}))}),200)):this.stateOptions=[]},updateStateList:function(){var e=this;setTimeout((function(){var t=[];e.tableData.forEach((function(e){e.state&&!t.some((function(t){return t.value===e.state}))&&t.push({label:e.state.replace("value","label"),value:e.state})})),e._defaultStateList=t,e.stateOptions=t}),100)},editActivedEvent:function(e){var t=e.row;t.state?t._stateOptions?this.stateOptions=t._stateOptions:this.stateOptions=this._defaultStateList:this.stateOptions=[]},editClosedEvent:function(e){var t=e.row;t._stateOptions=this.stateOptions},insertEvent:function(){var e=this,t={role:"",age:18,region:[],flag:!1,rate:2};this.$refs.xTable.insert(t).then((function(t){var n=t.row;return e.$refs.xTable.setActiveRow(n)}))},saveEvent:function(){var e=this.$refs.xTable.getRecordset(),t=e.insertRecords,n=e.removeRecords,a=e.updateRecords;t.length||n.length||a.length?(this.$alert("保存成功!"),this.searchEvent()):this.$alert("数据未改动!")},vaildEvent:function(){var e=this;this.$refs.xTable.validate((function(t){t?e.$XModal.message({status:"error",message:"校验不通过!"}):e.$XModal.message({status:"success",message:"校验成功!"})}))},dropdownMenuEvent:function(e){switch(e){case"remove":var t=this.$refs.xTable.getCheckboxRecords();t.length?this.$refs.xTable.removeCheckboxRow():this.$alert("请至少选择一条数据!");break;case"export":this.$refs.xTable.exportData();break}},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handleSizeChange:function(e){this.tablePage.pageSize=e,this.searchEvent()},handleCurrentChange:function(e){this.tablePage.currentPage=e,this.findList()},visibleMethod:function(e){var t=e.data;return"Y"===t.flag1},roleFetchSuggestions:function(e,t){var n=this.restaurants,a=e?n.filter(this.createStateFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout((function(){t(a)}),3e3*Math.random())},createStateFilter:function(e){return function(t){return 0===t.name.toLowerCase().indexOf(e.toLowerCase())}}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},"2686e":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",[e._m(0),n("vxe-grid",{ref:"xGrid",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row"}},on:{"checkbox-change":e.checkboxChangeEvent,"checkbox-all":e.checkboxChangeEvent},scopedSlots:e._u([{key:"top",fn:function(){return[n("Alert",{attrs:{type:"warning",closable:!1,"show-icon":""}},[e._v("已选择 "+e._s(e.selectRecords.length)+" 项")])]},proxy:!0},{key:"buttons",fn:function(){return[n("el-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("el-button",{on:{click:e.saveEvent}},[e._v("保存")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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-iview",target:"_blank"}},[e._v("vxe-table-plugin-iview")]),e._v(" 插件的 API")])}],l=(n("99af"),n("4160"),n("a630"),n("c975"),n("fb6a"),n("3ca3"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){var e=["前端","后端","开发","测试"];return{loading:!1,tableData:[],selectRecords:[],tableColumn:[{type:"checkbox",width:60},{type:"seq",title:"Number",width:80},{field:"name",title:"Number",minWidth:140,editRender:{name:"Input"}},{field:"role",title:"AutoComplete",width:160,editRender:{name:"AutoComplete",props:{data:e,filterMethod:this.roleFilterMethod}}},{field:"age",title:"InputNumber",width:160,editRender:{name:"InputNumber",props:{max:35,min:18}}},{field:"sex",title:"Select",width:140,editRender:{name:"Select",options:[]}},{field:"sex1",title:"Select",width:160,editRender:{name:"Select",options:[],props:{multiple:!0,clearable:!0}}},{field:"sex2",title:"Select",width:140,editRender:{name:"Select",optionGroups:[],props:{clearable:!0}}},{field:"region",title:"Cascader",width:200,editRender:{name:"Cascader",props:{data:[]}}},{field:"date",title:"DatePicker",width:200,editRender:{name:"DatePicker",props:{type:"date",format:"yyyy/MM/dd"}}},{field:"date1",title:"TimePicker",width:200,editRender:{name:"TimePicker",props:{type:"time"}}},{field:"flag",title:"iSwitch",width:100,editRender:{name:"iSwitch",type:"visible"}},{field:"rate",title:"Rate",width:200,editRender:{name:"Rate",type:"visible"}}],tableToolbar:{},demoCodes:['\n <vxe-grid\n border\n show-overflow\n ref="xGrid"\n height="460"\n :loading="loading"\n :data="tableData"\n :columns="tableColumn"\n :edit-config="{trigger: \'click\', mode: \'row\'}"\n @checkbox-change="checkboxChangeEvent"\n @checkbox-all="checkboxChangeEvent">\n <template v-slot:top>\n <Alert type="warning" :closable="false" show-icon>已选择 {{ selectRecords.length }} 项</Alert>\n </template>\n <template v-slot:buttons>\n <el-button @click="insertEvent">新增</el-button>\n <el-button @click="saveEvent">保存</el-button>\n </template>\n </vxe-grid>\n ',"\n export default {\n data () {\n let restaurants = ['前端', '后端', '开发', '测试']\n return {\n loading: false,\n tableData: [],\n selectRecords: [],\n tableColumn: [\n { type: 'checkbox', width: 60 },\n { type: 'seq', title: 'Number', width: 80 },\n { field: 'name', title: 'Number', minWidth: 140, editRender: { name: 'Input' } },\n { field: 'role', title: 'AutoComplete', width: 160, editRender: { name: 'AutoComplete', props: { data: restaurants, filterMethod: this.roleFilterMethod } } },\n { field: 'age', title: 'InputNumber', width: 160, editRender: { name: 'InputNumber', props: { max: 35, min: 18 } } },\n { field: 'sex', title: 'Select', width: 140, editRender: { name: 'Select', options: [] } },\n { field: 'sex1', title: 'Select', width: 140, editRender: { name: 'Select', options: [], props: { multiple: true, clearable: true } } },\n { field: 'sex2', title: 'Select', width: 140, editRender: { name: 'Select', optionGroups: [], props: { clearable: true } } },\n { field: 'region', title: 'Cascader', width: 200, editRender: { name: 'Cascader', props: { data: [] } } },\n { field: 'date', title: 'DatePicker', width: 200, editRender: { name: 'DatePicker', props: { type: 'date', format: 'yyyy/MM/dd' } } },\n { field: 'date1', title: 'TimePicker', width: 200, editRender: { name: 'TimePicker', props: { type: 'time' } } },\n { field: 'flag', title: 'iSwitch', width: 100, editRender: { name: 'iSwitch', type: 'visible' } },\n { field: 'rate', title: 'Rate', width: 200, editRender: { name: 'Rate', type: 'visible' } }\n ],\n tableToolbar: {}\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n this.loading = false\n }, 500)\n this.findSexList()\n this.findRegionList()\n this.findSexGroupList()\n },\n methods: {\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.tableColumn[5].editRender.options = data\n this.tableColumn[6].editRender.options = data\n })\n },\n findRegionList () {\n return XEAjax.get('/api/conf/region/list').then(data => {\n this.tableColumn[8].editRender.props.data = data\n })\n },\n findSexGroupList () {\n let sexGroupList = [\n {\n label: '分组1',\n options: [\n {\n label: '男',\n value: '1'\n }\n ]\n },\n {\n label: '分组2',\n options: [\n {\n label: '女',\n value: '0'\n }\n ]\n }\n ]\n this.tableColumn[7].editRender.optionGroups = sexGroupList\n },\n insertEvent () {\n let xGrid = this.$refs.xGrid\n let record = {\n role: '',\n age: 18,\n sex1: [],\n region: [],\n flag: false,\n rate: 2\n }\n xGrid.insert(record).then(({ row }) => xGrid.setActiveRow(row))\n },\n saveEvent () {\n let { insertRecords, removeRecords, updateRecords } = this.$refs.xGrid.getRecordset()\n if (insertRecords.length || removeRecords.length || updateRecords.length) {\n this.$alert(`insertRecords=${insertRecords.length}; removeRecords=${removeRecords.length}; updateRecords=${updateRecords.length}`)\n } else {\n this.$alert('数据未改动!')\n }\n },\n roleFilterMethod (value, option) {\n return option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1\n },\n checkboxChangeEvent () {\n this.selectRecords = this.$refs.xGrid.getCheckboxRecords()\n }\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,10),e.loading=!1}),500),this.findSexList(),this.findRegionList(),this.findSexGroupList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){e.tableColumn[5].editRender.options=t,e.tableColumn[6].editRender.options=t}))},findRegionList:function(){var e=this;return r.a.get("/api/conf/region/list").then((function(t){e.tableColumn[8].editRender.props.data=t}))},findSexGroupList:function(){var e=[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}];this.tableColumn[7].editRender.optionGroups=e},insertEvent:function(){var e=this.$refs.xGrid,t={role:"",age:18,sex1:[],region:[],flag:!1,rate:2};e.insert(t).then((function(t){var n=t.row;return e.setActiveRow(n)}))},saveEvent:function(){var e=this.$refs.xGrid.getRecordset(),t=e.insertRecords,n=e.removeRecords,a=e.updateRecords;t.length||n.length||a.length?this.$alert("insertRecords=".concat(t.length,"; removeRecords=").concat(n.length,"; updateRecords=").concat(a.length)):this.$alert("数据未改动!")},roleFilterMethod:function(e,t){return-1!==t.toUpperCase().indexOf((e||"").toUpperCase())},checkboxChangeEvent:function(){this.selectRecords=this.$refs.xGrid.getCheckboxRecords()}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},"84b6":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",[e._m(0),n("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"",height:"400",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"ElInput",width:"100",filters:[{data:""}],"filter-render":{name:"ElInput",props:{placeholder:"请输入名称"}}}}),n("vxe-table-column",{attrs:{field:"age",title:"ElInputNumber",sortable:"",width:"180",filters:[{data:0}],"filter-render":{name:"ElInputNumber",props:{min:0,max:100}}}}),n("vxe-table-column",{attrs:{field:"role",title:"ElAutocomplete",width:"160",filters:[{data:""}],"filter-render":{name:"ElAutocomplete",props:{fetchSuggestions:e.roleFetchSuggestions,placeholder:"请输入角色名称"}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"ElSelect",width:"100",formatter:e.formatterSex,filters:[{data:null}],"filter-render":{name:"ElSelect",options:e.sexList,props:{placeholder:"请选择"}}}}),n("vxe-table-column",{attrs:{field:"sex1",title:"ElSelect",width:"100",formatter:e.formatterSexs,filters:[{data:[]}],"filter-render":{name:"ElSelect",options:e.sexList,props:{multiple:!0,placeholder:"请选择"}}}}),n("vxe-table-column",{attrs:{field:"date3",title:"ElDatePicker",width:"140",filters:[{data:[]}],"filter-render":{name:"ElDatePicker",props:{type:"daterange",rangeSeparator:"至",startPlaceholder:"开始日期",endPlaceholder:"结束日期"}}}}),n("vxe-table-column",{attrs:{field:"flag",title:"ElSwitch",width:"100",filters:[{data:null}],"filter-render":{name:"ElSwitch"},"cell-render":{name:"ElSwitch",props:{disabled:!0}}}}),n("vxe-table-column",{attrs:{field:"rate",title:"ElRate",width:"180",sortable:"",filters:[{data:0}],"filter-render":{name:"ElRate"},"cell-render":{name:"ElRate",props:{disabled:!0}}}}),n("vxe-table-column",{attrs:{field:"slider",title:"ElSlider",width:"180",sortable:"",filters:[{data:0}],"filter-render":{name:"ElSlider"},"cell-render":{name:"ElSlider",props:{disabled:!0}}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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")]),e._v(" 适配插件的 API")])}],l=(n("4de4"),n("4160"),n("a630"),n("c975"),n("a15b"),n("d81d"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{tableData:[],sexList:[],restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"},{value:"开发",name:"开发"},{value:"测试",name:"测试"}],demoCodes:['\n <vxe-table\n border\n resizable\n highlight-hover-row\n height="400"\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="ElInput" width="100" :filters="[{data: \'\'}]" :filter-render="{name: \'ElInput\', props: {placeholder: \'请输入名称\'}}"></vxe-table-column>\n <vxe-table-column field="age" title="ElInputNumber" sortable width="180" :filters="[{data: 0}]" :filter-render="{name: \'ElInputNumber\', props: {min: 0, max: 100}}"></vxe-table-column>\n <vxe-table-column field="role" title="ElAutocomplete" width="160" :filters="[{data: \'\'}]" :filter-render="{name: \'ElAutocomplete\', props: {fetchSuggestions: roleFetchSuggestions, placeholder: \'请输入角色名称\'}}"></vxe-table-column>\n <vxe-table-column field="sex" title="ElSelect" width="100" :formatter="formatterSex" :filters="[{data: null}]" :filter-render="{name: \'ElSelect\', options: sexList, props: {placeholder: \'请选择\'}}"></vxe-table-column>\n <vxe-table-column field="sex1" title="ElSelect" width="100" :formatter="formatterSexs" :filters="[{data: []}]" :filter-render="{name: \'ElSelect\', options: sexList, props: {multiple: true, placeholder: \'请选择\'}}"></vxe-table-column>\n <vxe-table-column field="date3" title="ElDatePicker" width="140" :filters="[{data: []}]" :filter-render="{name: \'ElDatePicker\', props: {type: \'daterange\', rangeSeparator: \'至\', startPlaceholder: \'开始日期\', endPlaceholder: \'结束日期\'}}"></vxe-table-column>\n <vxe-table-column field="flag" title="ElSwitch" width="100" :filters="[{data: null}]" :filter-render="{name: \'ElSwitch\'}" :cell-render="{name: \'ElSwitch\', props: {disabled: true}}"></vxe-table-column>\n <vxe-table-column field="rate" title="ElRate" width="180" sortable :filters="[{data: 0}]" :filter-render="{name: \'ElRate\'}" :cell-render="{name: \'ElRate\', props: {disabled: true}}"></vxe-table-column>\n <vxe-table-column field="slider" title="ElSlider" width="180" sortable :filters="[{data: 0}]" :filter-render="{name: \'ElSlider\'}" :cell-render="{name: \'ElSlider\', props: {disabled: true}}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n sexList: [],\n restaurants: [\n { value: '前端', name: '前端' },\n { value: '后端', name: '后端' },\n { value: '开发', name: '开发' },\n { value: '测试', name: '测试' }\n ]\n }\n },\n created () {\n this.findSexList()\n this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n },\n methods: {\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.sexList = data\n return data\n })\n },\n formatterSex ({ cellValue }) {\n return cellValue === '1' ? '男' : cellValue === '0' ? '女' : ''\n },\n formatterSexs ({ cellValue }) {\n return cellValue ? cellValue.map(value => value === '1' ? '男' : value === '0' ? '女' : '').join(';') : ''\n },\n roleFetchSuggestions (queryString, cb) {\n var restaurants = this.restaurants\n var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants\n clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n cb(results)\n }, 1000 * Math.random())\n },\n createStateFilter (queryString) {\n return (state) => {\n return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)\n }\n }\n }\n }\n "]}},created:function(){this.findSexList(),this.tableData=window.MOCK_DATA_LIST.slice(0,10)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){return e.sexList=t,t}))},formatterSex:function(e){var t=e.cellValue;return"1"===t?"男":"0"===t?"女":""},formatterSexs:function(e){var t=e.cellValue;return t?t.map((function(e){return"1"===e?"男":"0"===e?"女":""})).join(";"):""},roleFetchSuggestions:function(e,t){var n=this.restaurants,a=e?n.filter(this.createStateFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout((function(){t(a)}),1e3*Math.random())},createStateFilter:function(e){return function(t){return 0===t.name.toLowerCase().indexOf(e.toLowerCase())}}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},"9d44":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",[e._m(0),n("vxe-grid",{ref:"xGrid",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row"}},on:{"checkbox-change":e.checkboxChangeEvent,"checkbox-all":e.checkboxChangeEvent},scopedSlots:e._u([{key:"top",fn:function(){return[n("el-alert",{attrs:{type:"warning",title:"已选择 "+e.selectRecords.length+" 项",closable:!1,"show-icon":""}})]},proxy:!0},{key:"buttons",fn:function(){return[n("el-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("el-button",{on:{click:e.saveEvent}},[e._v("保存")])]},proxy:!0}])}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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")]),e._v(" 插件的 API")])}],l=(n("99af"),n("4de4"),n("4160"),n("a630"),n("c975"),n("fb6a"),n("b0c0"),n("3ca3"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{loading:!1,tableData:[],selectRecords:[],tableColumn:[{type:"checkbox",width:60},{type:"seq",title:"Number",width:80},{field:"name",title:"ElInput",minWidth:140,editRender:{name:"ElInput"}},{field:"role",title:"ElAutocomplete",width:160,editRender:{name:"ElAutocomplete",props:{fetchSuggestions:this.roleFetchSuggestions}}},{field:"age",title:"ElInputNumber",width:160,editRender:{name:"ElInputNumber",props:{max:35,min:18}}},{field:"sex",title:"ElSelect",width:140,editRender:{name:"ElSelect",options:[]}},{field:"sex1",title:"ElSelect",width:160,editRender:{name:"ElSelect",options:[],props:{multiple:!0,clearable:!0}}},{field:"sex2",title:"ElSelect",width:140,editRender:{name:"ElSelect",optionGroups:[],props:{clearable:!0}}},{field:"region",title:"ElCascader",width:200,editRender:{name:"ElCascader",props:{options:[]}}},{field:"date",title:"ElDatePicker",width:200,editRender:{name:"ElDatePicker",props:{type:"date",format:"yyyy/MM/dd"}}},{field:"date1",title:"DateTimePicker",width:220,editRender:{name:"ElDatePicker",props:{type:"datetime",format:"yyyy-MM-dd HH:mm:ss"}}},{field:"date5",title:"ElTimeSelect",width:200,editRender:{name:"ElTimeSelect",props:{pickerOptions:{start:"08:30",step:"00:15",end:"18:30"}}}},{field:"flag",title:"ElSwitch",width:100,editRender:{name:"ElSwitch",type:"visible"}},{field:"rate",title:"ElRate",width:200,editRender:{name:"ElRate",type:"visible"}}],tableToolbar:{},restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"},{value:"开发",name:"开发"},{value:"测试",name:"测试"}],demoCodes:['\n <vxe-grid\n border\n show-overflow\n ref="xGrid"\n height="460"\n :loading="loading"\n :data="tableData"\n :columns="tableColumn"\n :toolbar="tableToolbar"\n :edit-config="{trigger: \'click\', mode: \'row\'}"\n @checkbox-change="checkboxChangeEvent"\n @checkbox-all="checkboxChangeEvent">\n <template v-slot:top>\n <el-alert type="warning" :title="`已选择 ${selectRecords.length} 项`" :closable="false" show-icon></el-alert>\n </template>\n <template v-slot:buttons>\n <el-button @click="insertEvent">新增</el-button>\n <el-button @click="saveEvent">保存</el-button>\n </template>\n </vxe-grid>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n selectRecords: [],\n tableColumn: [\n { type: 'checkbox', width: 60 },\n { type: 'seq', title: 'Number', width: 80 },\n { field: 'name', title: 'ElInput', minWidth: 140, editRender: { name: 'ElInput' } },\n { field: 'role', title: 'ElAutocomplete', width: 160, editRender: { name: 'ElAutocomplete', props: { fetchSuggestions: this.roleFetchSuggestions } } },\n { field: 'age', title: 'ElInputNumber', width: 160, editRender: { name: 'ElInputNumber', props: { max: 35, min: 18 } } },\n { field: 'sex', title: 'ElSelect', width: 140, editRender: { name: 'ElSelect', options: [] } },\n { field: 'sex1', title: 'ElSelect', width: 160, editRender: { name: 'ElSelect', options: [], props: { multiple: true, clearable: true } } },\n { field: 'sex2', title: 'ElSelect', width: 140, editRender: { name: 'ElSelect', optionGroups: [], props: { clearable: true } } },\n { field: 'region', title: 'ElCascader', width: 200, editRender: { name: 'ElCascader', props: { options: [] } } },\n { field: 'date', title: 'ElDatePicker', width: 200, editRender: { name: 'ElDatePicker', props: { type: 'date', format: 'yyyy/MM/dd' } } },\n { field: 'date1', title: 'DateTimePicker', width: 220, editRender: { name: 'ElDatePicker', props: { type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss' } } },\n { field: 'date5', title: 'ElTimeSelect', width: 200, editRender: { name: 'ElTimeSelect', props: { pickerOptions: { start: '08:30', step: '00:15', end: '18:30' } } } },\n { field: 'flag', title: 'ElSwitch', width: 100, editRender: { name: 'ElSwitch', type: 'visible' } },\n { field: 'rate', title: 'ElRate', width: 200, editRender: { name: 'ElRate', type: 'visible' } }\n ],\n tableToolbar: {},\n restaurants: [\n { value: '前端', name: '前端' },\n { value: '后端', name: '后端' },\n { value: '开发', name: '开发' },\n { value: '测试', name: '测试' }\n ]\n }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n this.loading = false\n }, 500)\n this.findSexList()\n this.findRegionList()\n this.findSexGroupList()\n },\n methods: {\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.tableColumn[5].editRender.options = data\n this.tableColumn[6].editRender.options = data\n })\n },\n findRegionList () {\n return XEAjax.get('/api/conf/region/list').then(data => {\n this.tableColumn[8].editRender.props.options = data\n })\n },\n findSexGroupList () {\n let sexGroupList = [\n {\n label: '分组1',\n options: [\n {\n label: '男',\n value: '1'\n }\n ]\n },\n {\n label: '分组2',\n options: [\n {\n label: '女',\n value: '0'\n }\n ]\n }\n ]\n this.tableColumn[7].editRender.optionGroups = sexGroupList\n },\n nsertEvent () {\n let xGrid = this.$refs.xGrid\n let record = {\n role: '',\n age: 18,\n sex1: [],\n region: [],\n flag: false,\n rate: 2\n }\n xGrid.insert(record).then(({ row }) => xGrid.setActiveRow(row))\n },\n saveEvent () {\n let { insertRecords, removeRecords, updateRecords } = this.$refs.xGrid.getRecordset()\n if (insertRecords.length || removeRecords.length || updateRecords.length) {\n this.$alert(`insertRecords=${insertRecords.length}; removeRecords=${removeRecords.length}; updateRecords=${updateRecords.length}`)\n } else {\n this.$alert('数据未改动!')\n }\n },\n roleFetchSuggestions (queryString, cb) {\n var restaurants = this.restaurants\n var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants\n clearTimeout(this.timeout)\n this.timeout = setTimeout(() => {\n cb(results)\n }, 1000 * Math.random())\n },\n createStateFilter (queryString) {\n return (state) => {\n return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)\n }\n },\n checkboxChangeEvent () {\n this.selectRecords = this.$refs.xGrid.getCheckboxRecords()\n }\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout((function(){e.tableData=window.MOCK_DATA_LIST.slice(0,10),e.loading=!1}),500),this.findSexList(),this.findRegionList(),this.findSexGroupList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){e.tableColumn[5].editRender.options=t,e.tableColumn[6].editRender.options=t}))},findRegionList:function(){var e=this;return r.a.get("/api/conf/region/list").then((function(t){e.tableColumn[8].editRender.props.options=t}))},findSexGroupList:function(){var e=[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}];this.tableColumn[7].editRender.optionGroups=e},insertEvent:function(){var e=this.$refs.xGrid,t={role:"",age:18,sex1:[],region:[],flag:!1,rate:2};e.insert(t).then((function(t){var n=t.row;return e.setActiveRow(n)}))},saveEvent:function(){var e=this.$refs.xGrid.getRecordset(),t=e.insertRecords,n=e.removeRecords,a=e.updateRecords;t.length||n.length||a.length?this.$alert("insertRecords=".concat(t.length,"; removeRecords=").concat(n.length,"; updateRecords=").concat(a.length)):this.$alert("数据未改动!")},roleFetchSuggestions:function(e,t){var n=this.restaurants,a=e?n.filter(this.createStateFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout((function(){t(a)}),1e3*Math.random())},createStateFilter:function(e){return function(t){return 0===t.name.toLowerCase().indexOf(e.toLowerCase())}},checkboxChangeEvent:function(){this.selectRecords=this.$refs.xGrid.getCheckboxRecords()}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},ac90: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",[e._m(0),n("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"",height:"400",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"Input",filters:[{data:""}],"filter-render":{name:"Input",props:{placeholder:"请输入名称"}}}}),n("vxe-table-column",{attrs:{field:"age",title:"InputNumber",sortable:"",width:"160",filters:[{data:0}],"filter-render":{name:"InputNumber",props:{min:0,max:100}}}}),n("vxe-table-column",{attrs:{field:"role",title:"AutoComplete",width:"160",filters:[{data:""}],"filter-render":{name:"AutoComplete",props:{data:e.restaurants,filterMethod:e.roleFilterMethod,placeholder:"请输入角色名称"}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Select",formatter:e.formatterSex,filters:[{data:null}],"filter-render":{name:"Select",options:e.sexList,props:{placeholder:"请选择"}}}}),n("vxe-table-column",{attrs:{field:"sex1",title:"Select",formatter:e.formatterSexs,filters:[{data:[]}],"filter-render":{name:"Select",options:e.sexList,props:{multiple:!0,placeholder:"请选择"}}}}),n("vxe-table-column",{attrs:{field:"date3",title:"DatePicker",filters:[{data:[]}],"filter-render":{name:"DatePicker",props:{type:"daterange",rangeSeparator:"至",startPlaceholder:"开始日期",endPlaceholder:"结束日期"}}}}),n("vxe-table-column",{attrs:{field:"flag",title:"iSwitch",width:"100",filters:[{data:null}],"filter-render":{name:"iSwitch"},"cell-render":{name:"iSwitch",props:{disabled:!0}}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"180",sortable:"",filters:[{data:0}],"filter-render":{name:"Rate"},"cell-render":{name:"Rate",props:{disabled:!0}}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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-iview",target:"_blank"}},[e._v("vxe-table-plugin-iview")]),e._v(" 适配插件的 API")])}],l=(n("4160"),n("a630"),n("c975"),n("a15b"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{tableData:[],sexList:[],restaurants:["前端","后端","开发","测试"],demoCodes:['\n <vxe-table\n border\n resizable\n highlight-hover-row\n height="400"\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="Input" :filters="[{data: \'\'}]" :filter-render="{name: \'Input\', props: {placeholder: \'请输入名称\'}}"></vxe-table-column>\n <vxe-table-column field="age" title="InputNumber" sortable width="160" :filters="[{data: 0}]" :filter-render="{name: \'InputNumber\', props: {min: 0, max: 100}}"></vxe-table-column>\n <vxe-table-column field="role" title="AutoComplete" width="160" :filters="[{data: \'\'}]" :filter-render="{name: \'AutoComplete\', props: {data: restaurants, filterMethod: roleFilterMethod, placeholder: \'请输入角色名称\'}}"></vxe-table-column>\n <vxe-table-column field="sex" title="Select" :formatter="formatterSex" :filters="[{data: null}]" :filter-render="{name: \'Select\', options: sexList, props: {placeholder: \'请选择\'}}"></vxe-table-column>\n <vxe-table-column field="sex1" title="Select" :formatter="formatterSexs" :filters="[{data: []}]" :filter-render="{name: \'Select\', options: sexList, props: {multiple: true, placeholder: \'请选择\'}}"></vxe-table-column>\n <vxe-table-column field="date3" title="DatePicker" :filters="[{data: []}]" :filter-render="{name: \'DatePicker\', props: {type: \'daterange\', rangeSeparator: \'至\', startPlaceholder: \'开始日期\', endPlaceholder: \'结束日期\'}}"></vxe-table-column>\n <vxe-table-column field="flag" title="iSwitch" width="100" :filters="[{data: null}]" :filter-render="{name: \'iSwitch\'}" :cell-render="{name: \'iSwitch\', props: {disabled: true}}"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" width="180" sortable :filters="[{data: 0}]" :filter-render="{name: \'Rate\'}" :cell-render="{name: \'Rate\', props: {disabled: true}}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n sexList: [],\n restaurants: ['前端', '后端', '开发', '测试']\n }\n },\n created () {\n this.findSexList()\n this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n },\n methods: {\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.sexList = data\n return data\n })\n },\n formatterSex ({ cellValue }) {\n return cellValue === '1' ? '男' : cellValue === '0' ? '女' : ''\n },\n formatterSexs ({ cellValue }) {\n return cellValue ? cellValue.map(value => value === '1' ? '男' : value === '0' ? '女' : '').join(';') : ''\n },\n roleFilterMethod (value, option) {\n return option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1\n }\n }\n }\n "]}},created:function(){this.findSexList(),this.tableData=window.MOCK_DATA_LIST.slice(0,10)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){return e.sexList=t,t}))},formatterSex:function(e){var t=e.cellValue;return"1"===t?"男":"0"===t?"女":""},formatterSexs:function(e){var t=e.cellValue;return t?t.map((function(e){return"1"===e?"男":"0"===e?"女":""})).join(";"):""},roleFilterMethod:function(e,t){return-1!==t.toUpperCase().indexOf((e||"").toUpperCase())}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},bc3d: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",[e._m(0),n("vxe-form",{attrs:{data:e.formData,"title-width":"120","title-align":"right"},on:{submit:e.searchEvent,reset:e.searchEvent}},[n("vxe-form-item",{attrs:{field:"name",title:"Input",span:"8","title-prefix":{message:"帮助信息!!!",icon:"fa fa-exclamation-circle"},"item-render":{name:"Input"}}}),n("vxe-form-item",{attrs:{field:"role",title:"AutoComplete",span:"8","item-render":{name:"AutoComplete",props:{data:e.restaurants,filterMethod:e.roleFilterMethod}}}}),n("vxe-form-item",{attrs:{field:"age",title:"InputNumber",span:"8","item-render":{name:"InputNumber"}}}),n("vxe-form-item",{attrs:{field:"sex",title:"Select",span:"8","item-render":{name:"Select",options:e.sexList}}}),n("vxe-form-item",{attrs:{field:"region",title:"Cascader",span:"8","item-render":{name:"Cascader",props:{data:e.regionList}}}}),n("vxe-form-item",{attrs:{field:"date",title:"DatePicker",span:"8","item-render":{name:"DatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-form-item",{attrs:{field:"date6",title:"TimePicker",span:"8",folding:"","item-render":{name:"TimePicker",props:{type:"time"}}}}),n("vxe-form-item",{attrs:{field:"flag",title:"iSwitch",span:"8",folding:"","item-render":{name:"iSwitch"}}}),n("vxe-form-item",{attrs:{field:"rate",title:"Rate",span:"8",folding:"","item-render":{name:"Rate"}}}),n("vxe-form-item",{attrs:{field:"flag1",title:"Radio",span:"8",folding:"","item-render":{name:"Radio",options:[{label:"是",value:"Y"},{label:"否",value:"N"}]}}}),n("vxe-form-item",{attrs:{field:"checkedList",title:"Checkbox",span:"8",folding:"","item-render":{name:"Checkbox",options:[{label:"北京",value:"beijing"},{label:"深圳",value:"shenzhen"},{label:"上海",value:"shanghai"}]},"visible-method":e.visibleMethod}}),n("vxe-form-item",{attrs:{span:"24",align:"center","collapse-node":"","item-render":{name:"ElButtons",children:[{content:"查询",props:{type:"primary",nativeType:"submit"}},{content:"重置",props:{nativeType:"reset"}}]}}})],1),n("vxe-toolbar",{attrs:{export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("Button",{on:{click:e.insertEvent}},[e._v("新增")]),n("Button",{on:{click:e.saveEvent}},[e._v("保存")]),n("Button",{on:{click:e.vaildEvent}},[e._v("校验")]),n("Dropdown",{on:{"on-click":e.dropdownMenuEvent}},[n("Button",[e._v(" 操作"),n("Icon",{attrs:{type:"ios-arrow-down"}})],1),n("DropdownMenu",{attrs:{slot:"list"},slot:"list"},[n("DropdownItem",{attrs:{name:"remove"}},[e._v("删除选中")]),n("DropdownItem",{attrs:{name:"export"}},[e._v("导出数据")])],1)],1)]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","highlight-hover-row":"","export-config":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row"}},on:{"edit-actived":e.editActivedEvent,"edit-closed":e.editClosedEvent}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{type:"seq",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"Input","min-width":"140",fixed:"left","edit-render":{name:"Input"}}}),n("vxe-table-column",{attrs:{field:"role",title:"AutoComplete","min-width":"160","edit-render":{name:"AutoComplete",props:{data:e.restaurants,filterMethod:e.roleFilterMethod}}}}),n("vxe-table-column",{attrs:{field:"age",title:"InputNumber",width:"140","edit-render":{name:"InputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"Select",width:"140","edit-render":{name:"Select",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"sexList",title:"Select multiple",width:"180","edit-render":{name:"Select",options:e.sexList,props:{multiple:!0}}}}),n("vxe-table-column",{attrs:{field:"state",title:"Select",width:"140","edit-render":{name:"Select",options:e.stateOptions,props:{remote:!0,filterable:!0,loading:e.stateloading,remoteMethod:e.remoteStateMethod}}}}),n("vxe-table-column",{attrs:{field:"region",title:"Cascader",width:"200","edit-render":{name:"Cascader",props:{data:e.regionList}}}}),n("vxe-table-column",{attrs:{field:"date",title:"DatePicker",width:"200","edit-render":{name:"DatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-table-column",{attrs:{field:"date6",title:"TimePicker",width:"200","edit-render":{name:"TimePicker",props:{type:"time"}}}}),n("vxe-table-column",{attrs:{field:"flag",title:"iSwitch",width:"100","edit-render":{name:"iSwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"Rate",width:"200",fixed:"right","edit-render":{name:"Rate",type:"visible"}}})],1),n("Page",{attrs:{"show-sizer":"","show-total":"","show-elevator":"","prev-text":"Previous","next-text":"Next","page-size-opts":[5,10,15,20,50,100,150,200],total:e.tablePage.totalResult,current:e.tablePage.currentPage},on:{"update:current":function(t){return e.$set(e.tablePage,"currentPage",t)},"on-page-size-change":e.handleSizeChange,"on-change":e.handleCurrentChange}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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/iview"}},[e._v("iview")]),e._v(" 组合渲染 + 使用分页")])}],l=(n("99af"),n("4de4"),n("4160"),n("a630"),n("c975"),n("d81d"),n("45fc"),n("ac1f"),n("3ca3"),n("5319"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{loading:!1,tableData:[],validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],sex:[{required:!0,message:"性别必须填写"}]},sexList:[],regionList:[],stateList:[],stateOptions:[],stateloading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"],restaurants:["前端","后端","开发","测试"],tablePage:{currentPage:1,pageSize:10,totalResult:0},formData:{name:"",role:"",sex:null,age:null,region:[],date:null,date6:null,flag:!1,rate:0,flag1:"",checkedList:[]},demoCodes:['\n <vxe-form :data="formData" title-width="120" title-align="right" @submit="searchEvent" @reset="searchEvent">\n <vxe-form-item field="name" title="Input" span="8" :title-prefix="{ message: \'帮助信息!!!\', icon: \'fa fa-exclamation-circle\' }" :item-render="{name: \'Input\'}"></vxe-form-item>\n <vxe-form-item field="role" title="AutoComplete" span="8" :item-render="{name: \'AutoComplete\', props: {data: restaurants, filterMethod: roleFilterMethod}}"></vxe-form-item>\n <vxe-form-item field="age" title="InputNumber" span="8" :item-render="{name: \'InputNumber\'}"></vxe-form-item>\n <vxe-form-item field="sex" title="Select" span="8" :item-render="{name: \'Select\', options: sexList}"></vxe-form-item>\n <vxe-form-item field="region" title="Cascader" span="8" :item-render="{name: \'Cascader\', props: {data: regionList}}"></vxe-form-item>\n <vxe-form-item field="date" title="DatePicker" span="8" :item-render="{name: \'DatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-form-item>\n <vxe-form-item field="date6" title="TimePicker" span="8" folding :item-render="{name: \'TimePicker\', props: {type: \'time\'}}"></vxe-form-item>\n <vxe-form-item field="flag" title="iSwitch" span="8" folding :item-render="{name: \'iSwitch\'}"></vxe-form-item>\n <vxe-form-item field="rate" title="Rate" span="8" folding :item-render="{name: \'Rate\'}"></vxe-form-item>\n <vxe-form-item field="flag1" title="Radio" span="8" folding :item-render="{name: \'Radio\', options: [{label: \'是\', value: \'Y\'}, {label: \'否\', value: \'N\'}]}"></vxe-form-item>\n <vxe-form-item field="checkedList" title="Checkbox" span="8" folding :item-render="{name: \'Checkbox\', options: [{label: \'北京\', value: \'beijing\'}, {label: \'深圳\', value: \'shenzhen\'}, {label: \'上海\', value: \'shanghai\'}]}" :visible-method="visibleMethod"></vxe-form-item>\n <vxe-form-item span="24" align="center" collapse-node :item-render="{name: \'ElButtons\', children: [{ content: \'查询\', props: {type: \'primary\', nativeType: \'submit\'} }, { content: \'重置\', props: {nativeType: \'reset\'} }]}"></vxe-form-item>\n </vxe-form>\n\n <vxe-toolbar export custom>\n <template v-slot:buttons>\n <Button @click="insertEvent">新增</Button>\n <Button @click="saveEvent">保存</Button>\n <Button @click="vaildEvent">校验</Button>\n <Dropdown @on-click="dropdownMenuEvent">\n <Button>\n 操作<Icon type="ios-arrow-down"></Icon>\n </Button >\n <DropdownMenu slot="list">\n <DropdownItem name="remove">删除选中</DropdownItem>\n <DropdownItem name="export">导出数据</DropdownItem>\n </DropdownMenu>\n </Dropdown>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n resizable\n show-overflow\n highlight-hover-row\n export-config\n ref="xTable"\n height="460"\n :loading="loading"\n :data="tableData"\n :edit-rules="validRules"\n :edit-config="{trigger: \'click\', mode: \'row\'}"\n @edit-actived="editActivedEvent"\n @edit-closed="editClosedEvent">\n <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="seq" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column field="name" title="Input" min-width="140" fixed="left" :edit-render="{name: \'Input\'}"></vxe-table-column>\n <vxe-table-column field="role" title="AutoComplete" min-width="160" :edit-render="{name: \'AutoComplete\', props: {data: restaurants, filterMethod: roleFilterMethod}}"></vxe-table-column>\n <vxe-table-column field="age" title="InputNumber" width="140" :edit-render="{name: \'InputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column field="sex" title="Select" width="140" :edit-render="{name: \'Select\', options: sexList}"></vxe-table-column>\n <vxe-table-column field="sexList" title="Select multiple" width="180" :edit-render="{name: \'Select\', options: sexList, props: {multiple: true}}"></vxe-table-column>\n <vxe-table-column field="state" title="Select" width="140" :edit-render="{name: \'Select\', options: stateOptions, props: {remote: true, filterable: true, loading: stateloading, remoteMethod: remoteStateMethod}}"></vxe-table-column>\n <vxe-table-column field="region" title="Cascader" width="200" :edit-render="{name: \'Cascader\', props: {data: regionList}}"> </vxe-table-column>\n <vxe-table-column field="date" title="DatePicker" width="200" :edit-render="{name: \'DatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-table-column>\n <vxe-table-column field="date6" title="TimePicker" width="200" :edit-render="{name: \'TimePicker\', props: {type: \'time\'}}"></vxe-table-column>\n <vxe-table-column field="flag" title="iSwitch" width="100" :edit-render="{name: \'iSwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column field="rate" title="Rate" width="200" fixed="right" :edit-render="{name: \'Rate\', type: \'visible\'}"></vxe-table-column>\n </vxe-table>\n\n <Page\n show-sizer\n show-total\n show-elevator\n prev-text="Previous"\n next-text="Next"\n :page-size-opts="[5, 10, 15, 20, 50, 100, 150, 200]"\n :total="tablePage.totalResult"\n :current.sync="tablePage.currentPage"\n @on-page-size-change="handleSizeChange"\n @on-change="handleCurrentChange"/>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n validRules: {\n name: [\n { required: true, message: '名称必须填写' },\n { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n ],\n sex: [\n { required: true, message: '性别必须填写' }\n ]\n },\n sexList: [],\n regionList: [],\n stateList: [],\n stateOptions: [],\n stateloading: false,\n states: [\n 'Alabama', 'Alaska', 'Arizona',\n 'Arkansas', 'California', 'Colorado',\n 'Connecticut', 'Delaware', 'Florida',\n 'Georgia', 'Hawaii', 'Idaho', 'Illinois',\n 'Indiana', 'Iowa', 'Kansas', 'Kentucky',\n 'Louisiana', 'Maine', 'Maryland',\n 'Massachusetts', 'Michigan', 'Minnesota',\n 'Mississippi', 'Missouri', 'Montana',\n 'Nebraska', 'Nevada', 'New Hampshire',\n 'New Jersey', 'New Mexico', 'New York',\n 'North Carolina', 'North Dakota', 'Ohio',\n 'Oklahoma', 'Oregon', 'Pennsylvania',\n 'Rhode Island', 'South Carolina',\n 'South Dakota', 'Tennessee', 'Texas',\n 'Utah', 'Vermont', 'Virginia',\n 'Washington', 'West Virginia', 'Wisconsin',\n 'Wyoming'\n ],\n restaurants: ['前端', '后端', '开发', '测试'],\n tablePage: {\n currentPage: 1,\n pageSize: 10,\n totalResult: 0\n },\n formData: {\n name: '',\n role: '',\n sex: null,\n age: null,\n region: [],\n date: null,\n date6: null,\n flag: false,\n rate: 0,\n flag1: '',\n checkedList: []\n }\n }\n },\n created () {\n this.stateList = this.states.map(item => {\n return { value: `value:${item}`, label: `label:${item}` }\n })\n this.findList()\n this.findSexList()\n this.findRegionList()\n },\n methods: {\n findList () {\n // 模拟后台数据\n this.loading = true\n XEAjax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData).then(({ page, result }) => {\n this.tableData = result\n this.tablePage.totalResult = page.totalResult\n this.loading = false\n this.updateStateList()\n }).catch(e => {\n this.loading = false\n })\n },\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.sexList = data\n return data\n })\n },\n findRegionList () {\n return XEAjax.get('/api/conf/region/list').then(data => {\n this.regionList = data\n return data\n })\n },\n remoteStateMethod (query) {\n if (query !== '') {\n this.stateloading = true\n setTimeout(() => {\n this.stateloading = false\n this.stateOptions = this.stateList.filter(item => {\n return item.label.toLowerCase()\n .indexOf(query.toLowerCase()) > -1\n })\n }, 200)\n } else {\n this.stateOptions = []\n }\n },\n // 模拟后台查当前页出远程下拉值\n updateStateList () {\n setTimeout(() => {\n let defaultStateList = []\n this.tableData.forEach(row => {\n if (row.state && !defaultStateList.some(item => item.value === row.state)) {\n defaultStateList.push({\n label: row.state.replace('value', 'label'),\n value: row.state\n })\n }\n })\n this._defaultStateList = defaultStateList\n this.stateOptions = defaultStateList\n }, 100)\n },\n editActivedEvent ({ row }) {\n // 当激活编辑时,重新更新远程下拉值\n if (row.state) {\n if (row._stateOptions) {\n this.stateOptions = row._stateOptions\n } else {\n // 如果是第一次点击则使用默认的列表\n this.stateOptions = this._defaultStateList\n }\n } else {\n this.stateOptions = []\n }\n },\n editClosedEvent ({ row }) {\n // 当激活编辑时,记录当前远程下拉值\n row._stateOptions = this.stateOptions\n },\n insertEvent () {\n let record = {\n role: '',\n age: 18,\n region: [],\n flag: false,\n rate: 2\n }\n this.$refs.xTable.insert(record).then(({ row }) => this.$refs.xTable.setActiveRow(row))\n },\n saveEvent () {\n let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getRecordset()\n if (insertRecords.length || removeRecords.length || updateRecords.length) {\n this.$Message.success('保存成功!')\n this.searchEvent()\n } else {\n this.$Message.info('数据未改动!')\n }\n },\n vaildEvent () {\n this.$refs.xTable.validate((errMap) => {\n if (errMap) {\n this.$XModal.message({ status: 'error', message: '校验不通过!' })\n } else {\n this.$XModal.message({ status: 'success', message: '校验成功!' })\n }\n })\n },\n dropdownMenuEvent (name) {\n switch (name) {\n case 'remove': {\n let selectRecords = this.$refs.xTable.getCheckboxRecords()\n if (selectRecords.length) {\n this.$refs.xTable.removeCheckboxRow()\n } else {\n this.$Message.info('请至少选择一条数据!')\n }\n break\n }\n case 'export': {\n this.$refs.xTable.exportData()\n break\n }\n }\n },\n searchEvent () {\n this.tablePage.currentPage = 1\n this.findList()\n },\n handleSizeChange (pageSize) {\n this.tablePage.pageSize = pageSize\n this.searchEvent()\n },\n handleCurrentChange (currentPage) {\n this.tablePage.currentPage = currentPage\n this.findList()\n },\n visibleMethod ({ data }) {\n return data.flag1 === 'Y'\n },\n roleFilterMethod (value, option) {\n return option.toUpperCase().indexOf(value.toUpperCase()) !== -1\n }\n }\n }\n "]}},created:function(){this.stateList=this.states.map((function(e){return{value:"value:".concat(e),label:"label:".concat(e)}})),this.findList(),this.findSexList(),this.findRegionList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,r.a.get("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.formData).then((function(t){var n=t.page,a=t.result;e.tableData=a,e.tablePage.totalResult=n.totalResult,e.loading=!1,e.updateStateList()})).catch((function(){e.loading=!1}))},findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){return e.sexList=t,t}))},findRegionList:function(){var e=this;return r.a.get("/api/conf/region/list").then((function(t){return e.regionList=t,t}))},remoteStateMethod:function(e){var t=this;""!==e?(this.stateloading=!0,setTimeout((function(){t.stateloading=!1,t.stateOptions=t.stateList.filter((function(t){return t.label.toLowerCase().indexOf(e.toLowerCase())>-1}))}),200)):this.stateOptions=[]},updateStateList:function(){var e=this;setTimeout((function(){var t=[];e.tableData.forEach((function(e){e.state&&!t.some((function(t){return t.value===e.state}))&&t.push({label:e.state.replace("value","label"),value:e.state})})),e._defaultStateList=t,e.stateOptions=t}),100)},editActivedEvent:function(e){var t=e.row;t.state?t._stateOptions?this.stateOptions=t._stateOptions:this.stateOptions=this._defaultStateList:this.stateOptions=[]},editClosedEvent:function(e){var t=e.row;t._stateOptions=this.stateOptions},insertEvent:function(){var e=this,t={role:"",age:18,region:[],flag:!1,rate:2};this.$refs.xTable.insert(t).then((function(t){var n=t.row;return e.$refs.xTable.setActiveRow(n)}))},saveEvent:function(){var e=this.$refs.xTable.getRecordset(),t=e.insertRecords,n=e.removeRecords,a=e.updateRecords;t.length||n.length||a.length?(this.$Message.success("保存成功!"),this.searchEvent()):this.$Message.info("数据未改动!")},vaildEvent:function(){var e=this;this.$refs.xTable.validate((function(t){t?e.$XModal.message({status:"error",message:"校验不通过!"}):e.$XModal.message({status:"success",message:"校验成功!"})}))},dropdownMenuEvent:function(e){switch(e){case"remove":var t=this.$refs.xTable.getCheckboxRecords();t.length?this.$refs.xTable.removeCheckboxRow():this.$Message.info("请至少选择一条数据!");break;case"export":this.$refs.xTable.exportData();break}},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handleSizeChange:function(e){this.tablePage.pageSize=e,this.searchEvent()},handleCurrentChange:function(e){this.tablePage.currentPage=e,this.findList()},visibleMethod:function(e){var t=e.data;return"Y"===t.flag1},roleFilterMethod:function(e,t){return-1!==t.toUpperCase().indexOf(e.toUpperCase())}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},e2c5: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",[e._m(0),n("vxe-table",{attrs:{border:"",resizable:"","highlight-hover-row":"",height:"400",data:e.tableData}},[n("vxe-table-column",{attrs:{type:"seq",width:"60"}}),n("vxe-table-column",{attrs:{field:"name",title:"AInput",filters:[{data:""}],"filter-render":{name:"AInput",props:{placeholder:"请输入名称"}}}}),n("vxe-table-column",{attrs:{field:"age",title:"AInputNumber",sortable:"",width:"160",filters:[{data:0}],"filter-render":{name:"AInputNumber",props:{min:0,max:100}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"ASelect",formatter:e.formatterSex,filters:[{data:null}],"filter-render":{name:"ASelect",options:e.sexList,props:{placeholder:"请选择"}}}}),n("vxe-table-column",{attrs:{field:"sex1",title:"ASelect",formatter:e.formatterSexs,filters:[{data:[]}],"filter-render":{name:"ASelect",options:e.sexList,props:{mode:"multiple",placeholder:"请选择"}}}}),n("vxe-table-column",{attrs:{field:"role",title:"AAutoComplete",width:"160",filters:[{data:""}],"filter-render":{name:"AAutoComplete",props:e.ACProps,events:{search:e.roleSearchEvent}}}}),n("vxe-table-column",{attrs:{field:"flag",title:"ASwitch",width:"100",filters:[{data:null}],"filter-render":{name:"ASwitch"},"cell-render":{name:"ASwitch",props:{disabled:!0}}}}),n("vxe-table-column",{attrs:{field:"rate",title:"ARate",width:"180",sortable:"",filters:[{data:0}],"filter-render":{name:"ARate"},"cell-render":{name:"ARate",props:{disabled:!0}}}})],1),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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-iview",target:"_blank"}},[e._v("vxe-table-plugin-iview")]),e._v(" 适配插件的 API")])}],l=(n("4de4"),n("4160"),n("a630"),n("c975"),n("a15b"),n("d81d"),n("fb6a"),n("3ca3"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{tableData:[],sexList:[],restaurants:["前端","后端","开发","测试"],ACProps:{dataSource:[],placeholder:"请输入角色名称"},demoCodes:['\n <vxe-table\n border\n resizable\n highlight-hover-row\n height="400"\n :data="tableData">\n <vxe-table-column type="seq" width="60"></vxe-table-column>\n <vxe-table-column field="name" title="AInput" :filters="[{data: \'\'}]" :filter-render="{name: \'AInput\', props: {placeholder: \'请输入名称\'}}"></vxe-table-column>\n <vxe-table-column field="age" title="AInputNumber" sortable width="160" :filters="[{data: 0}]" :filter-render="{name: \'AInputNumber\', props: {min: 0, max: 100}}"></vxe-table-column>\n <vxe-table-column field="sex" title="ASelect" :formatter="formatterSex" :filters="[{data: null}]" :filter-render="{name: \'ASelect\', options: sexList, props: {placeholder: \'请选择\'}}"></vxe-table-column>\n <vxe-table-column field="sex1" title="ASelect" :formatter="formatterSexs" :filters="[{data: []}]" :filter-render="{name: \'ASelect\', options: sexList, props: {mode: \'multiple\', placeholder: \'请选择\'}}"></vxe-table-column>\n <vxe-table-column field="role" title="AAutoComplete" width="160" :filters="[{data: \'\'}]" :filter-render="{name: \'AAutoComplete\', props: ACProps, events: {search: roleSearchEvent}}"></vxe-table-column>\n <vxe-table-column field="flag" title="ASwitch" width="100" :filters="[{data: null}]" :filter-render="{name: \'ASwitch\'}" :cell-render="{name: \'ASwitch\', props: {disabled: true}}"></vxe-table-column>\n <vxe-table-column field="rate" title="ARate" width="180" sortable :filters="[{data: 0}]" :filter-render="{name: \'ARate\'}" :cell-render="{name: \'ARate\', props: {disabled: true}}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n restaurants: ['前端', '后端', '开发', '测试'],\n ACProps: {\n dataSource: [],\n placeholder: '请输入角色名称'\n }\n }\n },\n created () {\n this.findSexList()\n this.tableData = window.MOCK_DATA_LIST.slice(0, 10)\n },\n methods: {\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.sexList = data\n return data\n })\n },\n formatterSex ({ cellValue }) {\n return cellValue === '1' ? '男' : cellValue === '0' ? '女' : ''\n },\n formatterSexs ({ cellValue }) {\n return cellValue ? cellValue.map(value => value === '1' ? '男' : value === '0' ? '女' : '').join(';') : ''\n },\n roleSearchEvent ({ row }, value) {\n this.ACProps.dataSource = this.restaurants.filter(option => option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1)\n }\n }\n }\n "]}},created:function(){this.findSexList(),this.tableData=window.MOCK_DATA_LIST.slice(0,10)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){return e.sexList=t,t}))},formatterSex:function(e){var t=e.cellValue;return"1"===t?"男":"0"===t?"女":""},formatterSexs:function(e){var t=e.cellValue;return t?t.map((function(e){return"1"===e?"男":"0"===e?"女":""})).join(";"):""},roleSearchEvent:function(e,t){this.ACProps.dataSource=this.restaurants.filter((function(e){return-1!==e.toUpperCase().indexOf((t||"").toUpperCase())}))}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports},e801: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",[e._m(0),n("vxe-form",{attrs:{data:e.formData,"title-width":"120","title-align":"right"},on:{submit:e.searchEvent,reset:e.searchEvent}},[n("vxe-form-item",{attrs:{field:"name",title:"AInput",span:"8","title-prefix":{message:"帮助信息!!!",icon:"fa fa-exclamation-circle"},"item-render":{name:"AInput"}}}),n("vxe-form-item",{attrs:{field:"role",title:"AAutoComplete",span:"8","item-render":{name:"AAutoComplete",props:e.ACProps,events:{search:e.roleSearchEvent}}}}),n("vxe-form-item",{attrs:{field:"age",title:"AInputNumber",span:"8","item-render":{name:"AInputNumber"}}}),n("vxe-form-item",{attrs:{field:"sex",title:"ASelect",span:"8","item-render":{name:"ASelect",options:e.sexList}}}),n("vxe-form-item",{attrs:{field:"region",title:"ACascader",span:"8","item-render":{name:"ACascader",props:{options:e.regionList}}}}),n("vxe-form-item",{attrs:{field:"date",title:"ADatePicker",span:"8","item-render":{name:"ADatePicker",props:{type:"date",format:"YYYY/MM/DD"}}}}),n("vxe-form-item",{attrs:{field:"flag",title:"ASwitch",span:"8",folding:"","item-render":{name:"ASwitch"}}}),n("vxe-form-item",{attrs:{field:"rate",title:"ARate",span:"8",folding:"","item-render":{name:"ARate"}}}),n("vxe-form-item",{attrs:{field:"flag1",title:"ARadio",span:"8",folding:"","item-render":{name:"ARadio",options:[{label:"是",value:"Y"},{label:"否",value:"N"}]}}}),n("vxe-form-item",{attrs:{field:"checkedList",title:"ACheckbox",span:"8",folding:"","item-render":{name:"ACheckbox",options:[{label:"北京",value:"beijing"},{label:"深圳",value:"shenzhen"},{label:"上海",value:"shanghai"}]},"visible-method":e.visibleMethod}}),n("vxe-form-item",{attrs:{span:"24",align:"center","collapse-node":"","item-render":{name:"AButtons",children:[{content:"查询",props:{type:"primary",htmlType:"submit"}},{content:"重置",props:{htmlType:"reset"}}]}}})],1),n("vxe-toolbar",{attrs:{export:"",custom:""},scopedSlots:e._u([{key:"buttons",fn:function(){return[n("a-button",{on:{click:e.insertEvent}},[e._v("新增")]),n("a-button",{on:{click:e.saveEvent}},[e._v("保存")]),n("a-button",{on:{click:e.vaildEvent}},[e._v("校验")]),n("a-dropdown",{attrs:{trigger:["click"]}},[n("a-button",[e._v("操作"),n("a-icon",{attrs:{type:"down"}})],1),n("a-menu",{attrs:{slot:"overlay"},slot:"overlay"},[n("a-menu-item",{key:"0"},[n("a",{on:{click:function(t){return e.dropdownMenuEvent("remove")}}},[e._v("删除选中")])]),n("a-menu-item",{key:"1"},[n("a",{on:{click:function(t){return e.dropdownMenuEvent("export")}}},[e._v("导出数据")])]),n("a-menu-divider")],1)],1)]},proxy:!0}])}),n("vxe-table",{ref:"xTable",attrs:{border:"",resizable:"","show-overflow":"","highlight-hover-row":"","export-config":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row"}}},[n("vxe-table-column",{attrs:{type:"checkbox",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{type:"seq",title:"Number",width:"80",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"AInput","min-width":"140",fixed:"left","edit-render":{name:"AInput"}}}),n("vxe-table-column",{attrs:{field:"role",title:"AAutoComplete",width:"160","edit-render":{name:"AAutoComplete",props:e.ACProps,events:{search:e.roleSearchEvent}}}}),n("vxe-table-column",{attrs:{field:"age",title:"AInputNumber",width:"160","edit-render":{name:"AInputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{field:"sex",title:"ASelect",width:"140","edit-render":{name:"ASelect",options:e.sexList}}}),n("vxe-table-column",{attrs:{field:"sexList",title:"ASelect multiple",width:"180","edit-render":{name:"ASelect",options:e.sexList,props:{mode:"multiple"}}}}),n("vxe-table-column",{attrs:{field:"region",title:"ACascader",width:"200","edit-render":{name:"ACascader",props:{options:e.regionList}}}}),n("vxe-table-column",{attrs:{field:"date1",title:"ADatePicker",width:"200","edit-render":{name:"ADatePicker",props:{type:"date",format:"YYYY/MM/DD"}}}}),n("vxe-table-column",{attrs:{field:"flag",title:"ASwitch",width:"100","edit-render":{name:"ASwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{field:"rate",title:"ARate",width:"200",fixed:"right","edit-render":{name:"ARate",type:"visible"}}})],1),n("a-pagination",{attrs:{"page-size-options":["5","10","15","20","50","100","150","200"],"page-size":e.tablePage.pageSize,total:e.tablePage.totalResult,showSizeChanger:"",showQuickJumper:""},on:{showSizeChange:e.handleSizeChange,change:e.handleCurrentChange},model:{value:e.tablePage.currentPage,callback:function(t){e.$set(e.tablePage,"currentPage",t)},expression:"tablePage.currentPage"}}),n("p",{staticClass:"demo-code"},[e._v(e._s(e.$t("app.body.button.showCode")))]),n("pre",[e._v(" "),n("code",{staticClass:"xml"},[e._v(e._s(e.demoCodes[0]))]),e._v("\n "),n("code",{staticClass:"javascript"},[e._v(e._s(e.demoCodes[1]))]),e._v("\n ")])],1)},i=[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/ant-design-vue"}},[e._v("ant-design-vue")]),e._v(" 组合渲染 + 使用分页")])}],l=(n("99af"),n("4de4"),n("4160"),n("a630"),n("c975"),n("3ca3"),n("159b"),n("628a")),r=n.n(l),s=n("1487"),o=n.n(s),d={data:function(){return{loading:!1,tableData:[],validRules:{name:[{required:!0,message:"名称必须填写"},{min:3,max:50,message:"名称长度在 3 到 50 个字符"}],sex:[{required:!0,message:"性别必须填写"}]},restaurants:["前端","后端","开发","测试"],ACProps:{dataSource:[]},sexList:[],regionList:[],sexGroupList:[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}],tablePage:{currentPage:1,pageSize:10,totalResult:0},formData:{name:"",role:"",sex:null,age:null,region:[],date:null,flag:!1,rate:0,flag1:"",checkedList:[]},demoCodes:['\n <vxe-form :data="formData" title-width="120" title-align="right" @submit="searchEvent" @reset="searchEvent">\n <vxe-form-item field="name" title="AInput" span="8" :title-prefix="{ message: \'帮助信息!!!\', icon: \'fa fa-exclamation-circle\' }" :item-render="{name: \'AInput\'}"></vxe-form-item>\n <vxe-form-item field="role" title="AAutoComplete" span="8" :item-render="{name: \'AAutoComplete\', props: ACProps, events: {search: roleSearchEvent}}"></vxe-form-item>\n <vxe-form-item field="age" title="AInputNumber" span="8" :item-render="{name: \'AInputNumber\'}"></vxe-form-item>\n <vxe-form-item field="sex" title="ASelect" span="8" :item-render="{name: \'ASelect\', options: sexList}"></vxe-form-item>\n <vxe-form-item field="region" title="ACascader" span="8" :item-render="{name: \'ACascader\', props: {options: regionList}}"></vxe-form-item>\n <vxe-form-item field="date" title="ADatePicker" span="8" :item-render="{name: \'ADatePicker\', props: {type: \'date\', format: \'YYYY/MM/DD\'}}"></vxe-form-item>\n <vxe-form-item field="flag" title="ASwitch" span="8" folding :item-render="{name: \'ASwitch\'}"></vxe-form-item>\n <vxe-form-item field="rate" title="ARate" span="8" folding :item-render="{name: \'ARate\'}"></vxe-form-item>\n <vxe-form-item field="flag1" title="ARadio" span="8" folding :item-render="{name: \'ARadio\', options: [{label: \'是\', value: \'Y\'}, {label: \'否\', value: \'N\'}]}"></vxe-form-item>\n <vxe-form-item field="checkedList" title="ACheckbox" span="8" folding :item-render="{name: \'ACheckbox\', options: [{label: \'北京\', value: \'beijing\'}, {label: \'深圳\', value: \'shenzhen\'}, {label: \'上海\', value: \'shanghai\'}]}" :visible-method="visibleMethod"></vxe-form-item>\n <vxe-form-item span="24" align="center" collapse-node :item-render="{name: \'AButtons\', children: [{ content: \'查询\', props: {type: \'primary\', htmlType: \'submit\'} }, { content: \'重置\', props: {htmlType: \'reset\'} }]}"></vxe-form-item>\n </vxe-form>\n\n <vxe-toolbar export custom>\n <template v-slot:buttons>\n <a-button @click="insertEvent">新增</a-button>\n <a-button @click="saveEvent">保存</a-button>\n <a-button @click="vaildEvent">校验</a-button>\n <a-dropdown :trigger="[\'click\']">\n <a-button>操作<a-icon type="down" /></a-button>\n <a-menu slot="overlay">\n <a-menu-item key="0">\n <a @click="dropdownMenuEvent(\'remove\')">删除选中</a>\n </a-menu-item>\n <a-menu-item key="1">\n <a @click="dropdownMenuEvent(\'export\')">导出数据</a>\n </a-menu-item>\n <a-menu-divider />\n </a-menu>\n </a-dropdown>\n </template>\n </vxe-toolbar>\n\n <vxe-table\n border\n resizable\n show-overflow\n highlight-hover-row\n export-config\n ref="xTable"\n height="460"\n :loading="loading"\n :data="tableData"\n :edit-rules="validRules"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\n <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="seq" title="Number" width="80" fixed="left"></vxe-table-column>\n <vxe-table-column field="name" title="AInput" min-width="140" :edit-render="{name: \'AInput\'}"></vxe-table-column>\n <vxe-table-column field="role" title="AAutoComplete" width="160" :edit-render="{name: \'AAutoComplete\', props: ACProps, events: {search: roleSearchEvent}}"></vxe-table-column>\n <vxe-table-column field="age" title="AInputNumber" width="160" :edit-render="{name: \'AInputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column field="sex" title="ASelect" width="140" :edit-render="{name: \'ASelect\', options: sexList}"></vxe-table-column>\n <vxe-table-column field="region" title="ACascader" width="200" :edit-render="{name: \'ACascader\', props: {options: regionList}}"></vxe-table-column>\n <vxe-table-column field="date1" title="ADatePicker" width="200" :edit-render="{name: \'ADatePicker\', props: {type: \'date\', format: \'YYYY/MM/DD\'}}"></vxe-table-column>\n <vxe-table-column field="flag" title="ASwitch" width="100" :edit-render="{name: \'ASwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column field="rate" title="ARate" width="200" fixed="right" :edit-render="{name: \'ARate\', type: \'visible\'}"></vxe-table-column>\n </vxe-table>\n\n <a-pagination\n @showSizeChange="handleSizeChange"\n @change="handleCurrentChange"\n v-model="tablePage.currentPage"\n :page-size-options="[\'5\', \'10\', \'15\', \'20\', \'50\', \'100\', \'150\', \'200\']"\n :page-size="tablePage.pageSize"\n :total="tablePage.totalResult"\n showSizeChanger\n showQuickJumper>\n </a-pagination>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n validRules: {\n name: [\n { required: true, message: '名称必须填写' },\n { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }\n ],\n sex: [\n { required: true, message: '性别必须填写' }\n ]\n },\n restaurants: ['前端', '后端', '开发', '测试'],\n ACProps: {\n dataSource: []\n },\n sexList: [],\n regionList: [],\n sexGroupList: [\n {\n label: '分组1',\n options: [\n {\n label: '男',\n value: '1'\n }\n ]\n },\n {\n label: '分组2',\n options: [\n {\n label: '女',\n value: '0'\n }\n ]\n }\n ],\n tablePage: {\n currentPage: 1,\n pageSize: 10,\n totalResult: 0\n },\n formData: {\n name: '',\n role: '',\n sex: null,\n age: null,\n region: [],\n date: null,\n flag: false,\n rate: 0,\n flag1: '',\n checkedList: []\n }\n }\n },\n created () {\n this.findList()\n this.findSexList()\n this.findRegionList()\n },\n methods: {\n findList () {\n this.loading = true\n XEAjax.get(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData).then(({ page, result }) => {\n this.tableData = result\n this.tablePage.totalResult = page.totalResult\n this.loading = false\n }).catch(e => {\n this.loading = false\n })\n },\n findSexList () {\n return XEAjax.get('/api/conf/sex/list').then(data => {\n this.sexList = data\n return data\n })\n },\n findRegionList () {\n return XEAjax.get('/api/conf/region/list').then(data => {\n this.regionList = data\n return data\n })\n },\n insertEvent () {\n let record = {\n role: '',\n age: 18,\n region: [],\n flag: false,\n rate: 2\n }\n this.$refs.xTable.insert(record).then(({ row }) => this.$refs.xTable.setActiveRow(row))\n },\n saveEvent () {\n let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getRecordset()\n if (insertRecords.length || removeRecords.length || updateRecords.length) {\n this.$message.success('保存成功!')\n this.searchEvent()\n } else {\n this.$message.warning('数据未改动!')\n }\n },\n vaildEvent () {\n this.$refs.xTable.validate((errMap) => {\n if (errMap) {\n this.$XModal.message({ status: 'error', message: '校验不通过!' })\n } else {\n this.$XModal.message({ status: 'success', message: '校验成功!' })\n }\n })\n },\n dropdownMenuEvent (name) {\n switch (name) {\n case 'remove': {\n let selectRecords = this.$refs.xTable.getCheckboxRecords()\n if (selectRecords.length) {\n this.$refs.xTable.removeCheckboxRow()\n } else {\n this.$message.warning('请至少选择一条数据!')\n }\n break\n }\n case 'export': {\n this.$refs.xTable.exportData()\n break\n }\n }\n },\n searchEvent () {\n this.tablePage.currentPage = 1\n this.findList()\n },\n handleSizeChange (current, size) {\n this.tablePage.pageSize = size\n this.searchEvent()\n },\n handleCurrentChange (page, pageSize) {\n this.tablePage.currentPage = page\n this.findList()\n },\n visibleMethod ({ data }) {\n return data.flag1 === 'Y'\n },\n roleSearchEvent ({ row }, value) {\n this.ACProps.dataSource = this.restaurants.filter(option => option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1)\n }\n }\n }\n "]}},created:function(){this.findList(),this.findSexList(),this.findRegionList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach((function(e){o.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,r.a.get("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.formData).then((function(t){var n=t.page,a=t.result;e.tableData=a,e.tablePage.totalResult=n.totalResult,e.loading=!1})).catch((function(){e.loading=!1}))},findSexList:function(){var e=this;return r.a.get("/api/conf/sex/list").then((function(t){return e.sexList=t,t}))},findRegionList:function(){var e=this;return r.a.get("/api/conf/region/list").then((function(t){return e.regionList=t,t}))},insertEvent:function(){var e=this,t={role:"",age:18,region:[],flag:!1,rate:2};this.$refs.xTable.insert(t).then((function(t){var n=t.row;return e.$refs.xTable.setActiveRow(n)}))},saveEvent:function(){var e=this.$refs.xTable.getRecordset(),t=e.insertRecords,n=e.removeRecords,a=e.updateRecords;t.length||n.length||a.length?(this.$message.success("保存成功!"),this.searchEvent()):this.$message.warning("数据未改动!")},vaildEvent:function(){var e=this;this.$refs.xTable.validate((function(t){t?e.$XModal.message({status:"error",message:"校验不通过!"}):e.$XModal.message({status:"success",message:"校验成功!"})}))},dropdownMenuEvent:function(e){switch(e){case"remove":var t=this.$refs.xTable.getCheckboxRecords();t.length?this.$refs.xTable.removeCheckboxRow():this.$message.warning("请至少选择一条数据!");break;case"export":this.$refs.xTable.exportData();break}},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handleSizeChange:function(e,t){this.tablePage.pageSize=t,this.searchEvent()},handleCurrentChange:function(e){this.tablePage.currentPage=e,this.findList()},visibleMethod:function(e){var t=e.data;return"Y"===t.flag1},roleSearchEvent:function(e,t){this.ACProps.dataSource=this.restaurants.filter((function(e){return-1!==e.toUpperCase().indexOf((t||"").toUpperCase())}))}}},c=d,u=n("2877"),m=Object(u["a"])(c,a,i,!1,null,null,null);t["default"]=m.exports}}]);