(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",{staticClass:"vxe-table-antd",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}}),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("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),d={data:function(){return{loading:!1,tableData:[],tableColumn:[{type:"selection",width:60},{type:"index",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"}}],restaurants:["前端","后端","开发","测试"],demoCodes:['\n        <vxe-grid\n          border\n          show-overflow\n          class="vxe-table-antd"\n          height="460"\n          :loading="loading"\n          :data.sync="tableData"\n          :columns="tableColumn"\n          :edit-config="{trigger: \'click\', mode: \'row\'}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableColumn: [\n                { type: 'selection', width: 60 },\n                { type: 'index', 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              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.doGet('/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.doGet('/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            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          }\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){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;e.tableColumn[5].editRender.options=n,e.tableColumn[6].editRender.options=n})},findRegionList:function(){var e=this;return r.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;e.tableColumn[8].editRender.props.options=n})},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},roleSearchEvent:function(e,t){e.row;var n=this.restaurants.filter(function(e){return-1!==e.toUpperCase().indexOf((t||"").toUpperCase())});this.tableColumn[3].editRender.props.dataSource=n}}},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("el-form",{ref:"tableform",attrs:{model:e.formData,inline:""}},[n("el-form-item",{attrs:{title:"名字",prop:"name"}},[n("el-input",{attrs:{placeholder:"名字"},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}})],1),n("el-form-item",{attrs:{title:"性别",prop:"sex"}},[n("el-select",{attrs:{placeholder:"性别"},model:{value:e.formData.sex,callback:function(t){e.$set(e.formData,"sex",t)},expression:"formData.sex"}},e._l(e.sexList,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:e.searchEvent}},[e._v("查询")]),n("el-button",{on:{click:function(t){return e.$refs.tableform.resetFields()}}},[e._v("重置")])],1)],1),n("vxe-toolbar",{attrs:{setting:""},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-dropdown",{on:{command:e.dropdownMenuEvent}},[n("el-button",[e._v("\n          操作"),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",staticClass:"vxe-table-element",attrs:{border:"",resizable:"","show-overflow":"","highlight-hover-row":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"ElInput","min-width":"140","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:"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:"DateTimePicker",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("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),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:[],restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"}],tablePage:{currentPage:1,pageSize:10,totalResult:0},formData:{name:null,sex:null},demoCodes:['\n          <el-form ref="tableform" class="click-table2-form" size="mini" :inline="true" :model="formData">\n            <el-form-item title="名字" prop="name">\n              <el-input v-model="formData.name" placeholder="名字"></el-input>\n            </el-form-item>\n            <el-form-item title="角色" prop="role">\n              <el-input v-model="formData.role" placeholder="请输入角色"></el-input>\n            </el-form-item>\n            <el-form-item>\n              <el-button type="primary" @click="searchEvent">查询</el-button>\n              <el-button @click="$refs.tableform.resetFields()">重置</el-button>\n            </el-form-item>\n          </el-form>\n\n          <vxe-toolbar setting>\n            <template v-slot:buttons>\n              <el-button @click="insertEvent">新增</el-button>\n              <el-button @click="saveEvent">保存</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            ref="xTable"\n            class="vxe-table-element"\n            height="460"\n            :loading="loading"\n            :data.sync="tableData"\n            :edit-rules="validRules"\n            :edit-config="{trigger: \'click\', mode: \'row\'}">\n            <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n            <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n            <vxe-table-column field="name" title="ElInput" min-width="140" :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="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="DateTimePicker" 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-pager\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-pager>\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              restaurants: [\n                { value: '前端', name: '前端' },\n                { value: '后端', name: '后端' }\n              ],\n              tablePage: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              },\n              formData: {\n                name: null,\n                sex: null\n              }\n            }\n          },\n          created () {\n            this.findList()\n            this.findSexList()\n            this.findRegionList()\n          },\n          methods: {\n            findList () {\n              // 模拟后台数据\n              this.loading = true\n              XEAjax.doGet(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData).then(response => {\n                let { page, result } = response.data\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.doGet('/api/conf/sex/list').then(({ data }) => {\n                this.sexList = data\n                return data\n              })\n            },\n            findRegionList () {\n              return XEAjax.doGet('/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.$alert('保存成功！')\n                this.searchEvent()\n              } else {\n                this.$alert('数据未改动！')\n              }\n            },\n            dropdownMenuEvent (name) {\n              switch (name) {\n                case 'remove': {\n                  let selectRecords = this.$refs.xTable.getSelectRecords()\n                  if (selectRecords.length) {\n                    this.$refs.xTable.removeSelecteds()\n                  } else {\n                    this.$alert('请至少选择一条数据！')\n                  }\n                  break\n                }\n                case 'export': {\n                  this.$refs.xTable.exportCsv()\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            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.findList(),this.findSexList(),this.findRegionList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){s.a.highlightBlock(e)})},methods:{findList:function(){var e=this;this.loading=!0,r.a.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.formData).then(function(t){var n=t.data,a=n.page,i=n.result;e.tableData=i,e.tablePage.totalResult=a.totalResult,e.loading=!1}).catch(function(t){e.loading=!1})},findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return r.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;return e.regionList=n,n})},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("数据未改动！")},dropdownMenuEvent:function(e){switch(e){case"remove":var t=this.$refs.xTable.getSelectRecords();t.length?this.$refs.xTable.removeSelecteds():this.$alert("请至少选择一条数据！");break;case"export":this.$refs.xTable.exportCsv();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()},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",{staticClass:"vxe-table-iview",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}}),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("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),d={data:function(){var e=["前端","后端","开发","测试"];return{loading:!1,tableData:[],tableColumn:[{type:"selection",width:60},{type:"index",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"}}],demoCodes:['\n        <vxe-grid\n          border\n          show-overflow\n          class="vxe-table-iview"\n          height="460"\n          :loading="loading"\n          :data.sync="tableData"\n          :columns="tableColumn"\n          :edit-config="{trigger: \'click\', mode: \'row\'}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            let restaurants = ['前端', '后端', '开发', '测试']\n            return {\n              loading: false,\n              tableData: [],\n              tableColumn: [\n                { type: 'selection', width: 60 },\n                { type: 'index', 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            }\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.findSexGroupList()\n          },\n          methods: {\n            findSexList () {\n              return XEAjax.doGet('/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.doGet('/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            roleFilterMethod  (value, option) {\n              return option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1\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.findSexGroupList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;e.tableColumn[5].editRender.options=n,e.tableColumn[6].editRender.options=n})},findRegionList:function(){var e=this;return r.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;e.tableColumn[8].editRender.props.data=n})},findSexGroupList:function(){var e=[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}];this.tableColumn[7].editRender.optionGroups=e},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},"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",{staticClass:"vxe-table-element",attrs:{border:"",resizable:"","highlight-hover-row":"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",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:"160",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:!1}],"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("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),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          class="vxe-table-element"\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column type="index" 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="160" :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: false}]" :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.doGet('/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){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},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",{staticClass:"vxe-table-element",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}}),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("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),d={data:function(){return{loading:!1,tableData:[],tableColumn:[{type:"selection",width:60},{type:"index",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"}}],restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"},{value:"开发",name:"开发"},{value:"测试",name:"测试"}],demoCodes:['\n        <vxe-grid\n          border\n          show-overflow\n          class="vxe-table-element"\n          height="460"\n          :loading="loading"\n          :data.sync="tableData"\n          :columns="tableColumn"\n          :edit-config="{trigger: \'click\', mode: \'row\'}"></vxe-grid>\n        ',"\n        export default {\n          data () {\n            return {\n              loading: false,\n              tableData: [],\n              tableColumn: [\n                { type: 'selection', width: 60 },\n                { type: 'index', 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              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            this.findSexGroupList()\n          },\n          methods: {\n            findSexList () {\n              return XEAjax.doGet('/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.doGet('/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            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(){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.findSexGroupList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;e.tableColumn[5].editRender.options=n,e.tableColumn[6].editRender.options=n})},findRegionList:function(){var e=this;return r.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;e.tableColumn[8].editRender.props.options=n})},findSexGroupList:function(){var e=[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}];this.tableColumn[7].editRender.optionGroups=e},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},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",{staticClass:"vxe-table-iview",attrs:{border:"",resizable:"","highlight-hover-row":"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",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:!1}],"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("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),d={data:function(){return{tableData:[],sexList:[],restaurants:["前端","后端","开发","测试"],demoCodes:['\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          class="vxe-table-iview"\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column type="index" 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: false}]" :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.doGet('/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){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},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("Form",{ref:"tableform",attrs:{model:e.formData,inline:""}},[n("FormItem",{attrs:{prop:"name"}},[n("Input",{attrs:{type:"text",placeholder:"Username"},model:{value:e.formData.name,callback:function(t){e.$set(e.formData,"name",t)},expression:"formData.name"}})],1),n("FormItem",{attrs:{prop:"password"}},[n("Select",{attrs:{placeholder:"性别"},model:{value:e.formData.sex,callback:function(t){e.$set(e.formData,"sex",t)},expression:"formData.sex"}},e._l(e.sexList,function(e){return n("Option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)],1),n("FormItem",[n("Button",{attrs:{type:"primary"},on:{click:e.searchEvent}},[e._v("查询")]),n("Button",{on:{click:function(t){return e.$refs.tableform.resetFields()}}},[e._v("重置")])],1)],1),n("vxe-toolbar",{attrs:{setting:""},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("Dropdown",{on:{"on-click":e.dropdownMenuEvent}},[n("Button",[e._v("\n          操作"),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",staticClass:"vxe-table-iview",attrs:{border:"",resizable:"","show-overflow":"","highlight-hover-row":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{type:"index",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"Input","min-width":"140","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:"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("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),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:[],restaurants:["前端","后端","开发","测试"],tablePage:{currentPage:1,pageSize:10,totalResult:0},formData:{name:null,sex:null},demoCodes:['\n        <Form ref="tableform" :model="formData" inline>\n          <FormItem prop="name">\n            <Input type="text" v-model="formData.name" placeholder="Username"/>\n          </FormItem>\n          <FormItem prop="password">\n            <Select v-model="formData.sex" placeholder="性别">\n              <Option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></Option>\n            </Select>\n          </FormItem>\n          <FormItem>\n            <Button type="primary" @click="searchEvent">查询</Button>\n            <Button @click="$refs.tableform.resetFields()">重置</Button>\n          </FormItem>\n        </Form>\n\n        <vxe-toolbar setting>\n          <template v-slot:buttons>\n            <Button @click="insertEvent">新增</Button>\n            <Button @click="saveEvent">保存</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          ref="xTable"\n          class="vxe-table-iview"\n          height="460"\n          size="small"\n          :loading="loading"\n          :data.sync="tableData"\n          :edit-rules="validRules"\n          :edit-config="{trigger: \'click\', mode: \'row\'}">\n          <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column type="index" width="60" fixed="left"></vxe-table-column>\n          <vxe-table-column field="name" title="Input" min-width="140" :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="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              tablePage: {\n                currentPage: 1,\n                pageSize: 10,\n                totalResult: 0\n              },\n              formData: {\n                name: null,\n                sex: null\n              }\n            }\n          },\n          created () {\n            this.findList()\n            this.findSexList()\n            this.findRegionList()\n          },\n          methods: {\n            findList () {\n              // 模拟后台数据\n              this.loading = true\n              XEAjax.doGet(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.formData).then(response => {\n                let { page, result } = response.data\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.doGet('/api/conf/sex/list').then(({ data }) => {\n                this.sexList = data\n                return data\n              })\n            },\n            findRegionList () {\n              return XEAjax.doGet('/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.info('数据未改动！')\n              }\n            },\n            dropdownMenuEvent (name) {\n              switch (name) {\n                case 'remove': {\n                  let selectRecords = this.$refs.xTable.getSelectRecords()\n                  if (selectRecords.length) {\n                    this.$refs.xTable.removeSelecteds()\n                  } else {\n                    this.$Message.info('请至少选择一条数据！')\n                  }\n                  break\n                }\n                case 'export': {\n                  this.$refs.xTable.exportCsv()\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            roleFilterMethod  (value, option) {\n              return 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){s.a.highlightBlock(e)})},methods:{findList:function(){var e=this;this.loading=!0,r.a.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.formData).then(function(t){var n=t.data,a=n.page,i=n.result;e.tableData=i,e.tablePage.totalResult=a.totalResult,e.loading=!1}).catch(function(t){e.loading=!1})},findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return r.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;return e.regionList=n,n})},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("数据未改动！")},dropdownMenuEvent:function(e){switch(e){case"remove":var t=this.$refs.xTable.getSelectRecords();t.length?this.$refs.xTable.removeSelecteds():this.$Message.info("请至少选择一条数据！");break;case"export":this.$refs.xTable.exportCsv();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()},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",{staticClass:"vxe-table-antd",attrs:{border:"",resizable:"","highlight-hover-row":"",height:"400",data:e.tableData},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"index",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:!1}],"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("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),d={data:function(){return{tableData:[],sexList:[],restaurants:["前端","后端","开发","测试"],ACProps:{dataSource:[],placeholder:"请输入角色名称"},demoCodes:['\n        <vxe-table\n          border\n          resizable\n          highlight-hover-row\n          class="vxe-table-antd"\n          height="400"\n          :data.sync="tableData">\n          <vxe-table-column type="index" 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: false}]" :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.doGet('/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){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},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){e.row;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("a-form",{attrs:{form:e.form,layout:"inline"},on:{submit:e.searchEvent}},[n("a-form-item",{attrs:{title:"名字"}},[n("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["name"],expression:"['name']"}],attrs:{placeholder:"名字"}})],1),n("a-form-item",{attrs:{title:"性别"}},[n("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["sex"],expression:"['sex']"}],attrs:{placeholder:"性别"}},e._l(e.sexList,function(t){return n("a-select-option",{key:t.value,attrs:{value:t.value}},[e._v(e._s(t.label))])}),1)],1),n("a-form-item",[n("a-button",{attrs:{type:"primary","html-type":"submit"}},[e._v("查询")]),n("a-button",{on:{click:function(t){return e.form.resetFields()}}},[e._v("重置")])],1)],1),n("vxe-toolbar",{attrs:{setting:""},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-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",staticClass:"vxe-table-antd",attrs:{border:"",resizable:"","show-overflow":"","highlight-hover-row":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{trigger:"click",mode:"row"}},on:{"update:data":function(t){e.tableData=t}}},[n("vxe-table-column",{attrs:{type:"selection",width:"60",fixed:"left"}}),n("vxe-table-column",{attrs:{type:"index",title:"Number",width:"80",fixed:"left"}}),n("vxe-table-column",{attrs:{field:"name",title:"AInput","min-width":"140","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:"region",title:"ACascader",width:"200","edit-render":{name:"ACascader",props:{options:e.regionList}}}}),n("vxe-table-column",{attrs:{field:"date7",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("5df3"),n("1c4c"),n("ac6a"),n("628a")),r=n.n(l),o=n("1487"),s=n.n(o),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},form:this.$form.createForm(this),demoCodes:['\n          <a-form :form="form" layout="inline" @submit="searchEvent">\n            <a-form-item title="名字">\n              <a-input v-decorator="[\'name\']" placeholder="名字"></a-input>\n            </a-form-item>\n            <a-form-item title="性别">\n              <a-select v-decorator="[\'sex\']" placeholder="性别">\n                <a-select-option v-for="item in sexList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>\n              </a-select>\n            </a-form-item>\n            <a-form-item>\n              <a-button type="primary" html-type="submit">查询</a-button>\n              <a-button @click="form.resetFields()">重置</a-button>\n            </a-form-item>\n          </a-form>\n\n          <vxe-toolbar setting>\n            <template v-slot:buttons>\n              <a-button @click="insertEvent">新增</a-button>\n              <a-button @click="saveEvent">保存</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            ref="xTable"\n            border\n            resizable\n            show-overflow\n            highlight-hover-row\n            class="vxe-table-antd"\n            height="460"\n            :loading="loading"\n            :data.sync="tableData"\n            :edit-rules="validRules"\n            :edit-config="{trigger: \'click\', mode: \'row\'}">\n            <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n            <vxe-table-column type="index" 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="date7" 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              form: this.$form.createForm(this)\n            }\n          },\n          created () {\n            this.findList()\n            this.findSexList()\n            this.findRegionList()\n          },\n          methods: {\n            findList () {\n              this.loading = true\n              XEAjax.doGet(`/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`, this.form.getFieldsValue()).then(response => {\n                let { page, result } = response.data\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.doGet('/api/conf/sex/list').then(({ data }) => {\n                this.sexList = data\n                return data\n              })\n            },\n            findRegionList () {\n              return XEAjax.doGet('/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            dropdownMenuEvent (name) {\n              switch (name) {\n                case 'remove': {\n                  let selectRecords = this.$refs.xTable.getSelectRecords()\n                  if (selectRecords.length) {\n                    this.$refs.xTable.removeSelecteds()\n                  } else {\n                    this.$message.warning('请至少选择一条数据！')\n                  }\n                  break\n                }\n                case 'export': {\n                  this.$refs.xTable.exportCsv()\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            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){s.a.highlightBlock(e)})},methods:{findList:function(){var e=this;this.loading=!0,r.a.doGet("/api/user/page/list/".concat(this.tablePage.pageSize,"/").concat(this.tablePage.currentPage),this.form.getFieldsValue()).then(function(t){var n=t.data,a=n.page,i=n.result;e.tableData=i,e.tablePage.totalResult=a.totalResult,e.loading=!1}).catch(function(t){e.loading=!1})},findSexList:function(){var e=this;return r.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return r.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;return e.regionList=n,n})},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("数据未改动！")},dropdownMenuEvent:function(e){switch(e){case"remove":var t=this.$refs.xTable.getSelectRecords();t.length?this.$refs.xTable.removeSelecteds():this.$message.warning("请至少选择一条数据！");break;case"export":this.$refs.xTable.exportCsv();break}},searchEvent:function(){this.tablePage.currentPage=1,this.findList()},handleSizeChange:function(e,t){this.tablePage.pageSize=t,this.searchEvent()},handleCurrentChange:function(e,t){this.tablePage.currentPage=e,this.findList()},roleSearchEvent:function(e,t){e.row;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}}]);