mirror of
https://gitee.com/xuliangzhan_admin/vxe-table.git
synced 2026-01-21 05:27:57 +08:00
1 line
106 KiB
JavaScript
1 line
106 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",staticClass:"vxe-table-antd",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row"}},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("保存")])]},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("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(l),s={data:function(){return{loading:!1,tableData:[],tableColumn:[{type:"checkbox",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"}}],tableToolbar:{},restaurants:["前端","后端","开发","测试"],demoCodes:['\n <vxe-grid\n border\n show-overflow\n ref="xGrid"\n class="vxe-table-antd"\n height="460"\n :loading="loading"\n :data="tableData"\n :columns="tableColumn"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\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 tableColumn: [\n { type: 'checkbox', 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 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 this.$ajax.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 this.$ajax.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 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 }\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){r.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.get("/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 this.$ajax.get("/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},insertEvent:function(){var e=this.$refs.xGrid,t={role:"",age:18,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){e.row;var n=this.restaurants.filter((function(e){return-1!==e.toUpperCase().indexOf((t||"").toUpperCase())}));this.tableColumn[3].editRender.props.dataSource=n}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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:{export:"",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-button",{on:{click:e.vaildEvent}},[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:{"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:"index",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:"state",title:"ElSelect",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:"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("a481"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(l),s={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:null,sex:null},demoCodes:['\n <el-form ref="tableform" :model="formData" inline>\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="sex">\n <el-select v-model="formData.sex" placeholder="性别">\n <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>\n </el-select>\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 export setting>\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 ref="xTable"\n class="vxe-table-element"\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="index" 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="state" title="ElSelect" 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="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-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: null,\n sex: null\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 this.$ajax.get(`/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 this.updateStateList()\n }).catch(e => {\n this.loading = false\n })\n },\n findSexList () {\n return this.$ajax.get('/api/conf/sex/list').then(({ data }) => {\n this.sexList = data\n return data\n })\n },\n findRegionList () {\n return this.$ajax.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 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.exportData()\n break\n }\n }\n },\n searchEvent () {\n this.tablePage.currentPage = 1\n this.findList()\n },\n vaildEvent () {\n this.$refs.xTable.validate(valid => {\n if (valid) {\n this.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\n })\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.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){r.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,this.$ajax.get("/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,e.updateStateList()})).catch((function(t){e.loading=!1}))},findSexList:function(){var e=this;return this.$ajax.get("/api/conf/sex/list").then((function(t){var n=t.data;return e.sexList=n,n}))},findRegionList:function(){var e=this;return this.$ajax.get("/api/conf/region/list").then((function(t){var n=t.data;return e.regionList=n,n}))},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:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},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.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()},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())}}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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",staticClass:"vxe-table-iview",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row"}},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("保存")])]},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("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(l),s={data:function(){var e=["前端","后端","开发","测试"];return{loading:!1,tableData:[],tableColumn:[{type:"checkbox",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"}}],tableToolbar:{},demoCodes:['\n <vxe-grid\n border\n show-overflow\n ref="xGrid"\n class="vxe-table-iview"\n height="460"\n :loading="loading"\n :data="tableData"\n :columns="tableColumn"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\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 tableColumn: [\n { type: 'checkbox', 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 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 this.$ajax.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 this.$ajax.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 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 }\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){r.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.get("/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 this.$ajax.get("/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},insertEvent:function(){var e=this.$refs.xGrid,t={role:"",age:18,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())}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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}},[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:"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:!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("1487")),r=n.n(l),s={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="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="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: 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 this.$ajax.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){r.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.get("/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())}}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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",staticClass:"vxe-table-element",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,columns:e.tableColumn,toolbar:e.tableToolbar,"edit-config":{trigger:"click",mode:"row"}},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("保存")])]},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("7f7f"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(l),s={data:function(){return{loading:!1,tableData:[],tableColumn:[{type:"checkbox",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"}}],tableToolbar:{},restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"},{value:"开发",name:"开发"},{value:"测试",name:"测试"}],demoCodes:['\n <vxe-grid\n border\n show-overflow\n ref="xGrid"\n class="vxe-table-element"\n height="460"\n :loading="loading"\n :data="tableData"\n :columns="tableColumn"\n :toolbar="tableToolbar"\n :edit-config="{trigger: \'click\', mode: \'row\'}">\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 tableColumn: [\n { type: 'checkbox', 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 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 this.$ajax.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 this.$ajax.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 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 }\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){r.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.get("/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 this.$ajax.get("/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},insertEvent:function(){var e=this.$refs.xGrid,t={role:"",age:18,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())}}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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}},[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("1487")),r=n.n(l),s={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="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 this.$ajax.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){r.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.get("/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())}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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:{export:"",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("Button",{on:{click:e.vaildEvent}},[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:{"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:"index",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:"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("a481"),n("5df3"),n("1c4c"),n("ac6a"),n("1487")),r=n.n(l),s={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: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 export setting>\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 ref="xTable"\n class="vxe-table-iview"\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="index" 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="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: null,\n sex: null\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 this.$ajax.get(`/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 this.updateStateList()\n }).catch(e => {\n this.loading = false\n })\n },\n findSexList () {\n return this.$ajax.get('/api/conf/sex/list').then(({ data }) => {\n this.sexList = data\n return data\n })\n },\n findRegionList () {\n return this.$ajax.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(valid => {\n if (valid) {\n this.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\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.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 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){r.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,this.$ajax.get("/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,e.updateStateList()})).catch((function(t){e.loading=!1}))},findSexList:function(){var e=this;return this.$ajax.get("/api/conf/sex/list").then((function(t){var n=t.data;return e.sexList=n,n}))},findRegionList:function(){var e=this;return this.$ajax.get("/api/conf/region/list").then((function(t){var n=t.data;return e.regionList=n,n}))},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:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},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.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()},roleFilterMethod:function(e,t){return-1!==t.toUpperCase().indexOf(e.toUpperCase())}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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}},[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("1487")),r=n.n(l),s={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="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 this.$ajax.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){r.a.highlightBlock(e)}))},methods:{findSexList:function(){var e=this;return this.$ajax.get("/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())}))}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.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:{export:"",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-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",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"}}},[n("vxe-table-column",{attrs:{type:"checkbox",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",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:"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("1487")),r=n.n(l),s={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 export setting>\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 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="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="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 this.$ajax.get(`/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 this.$ajax.get('/api/conf/sex/list').then(({ data }) => {\n this.sexList = data\n return data\n })\n },\n findRegionList () {\n return this.$ajax.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(valid => {\n if (valid) {\n this.$XModal.message({ status: 'success', message: '校验成功！' })\n } else {\n this.$XModal.message({ status: 'error', message: '校验不通过！' })\n }\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.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 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){r.a.highlightBlock(e)}))},methods:{findList:function(){var e=this;this.loading=!0,this.$ajax.get("/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 this.$ajax.get("/api/conf/sex/list").then((function(t){var n=t.data;return e.sexList=n,n}))},findRegionList:function(){var e=this;return this.$ajax.get("/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("数据未改动！")},vaildEvent:function(){var e=this;this.$refs.xTable.validate((function(t){t?e.$XModal.message({status:"success",message:"校验成功！"}):e.$XModal.message({status:"error",message:"校验不通过！"})}))},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.exportData();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())}))}}},o=s,d=n("2877"),c=Object(d["a"])(o,a,i,!1,null,null,null);t["default"]=c.exports}}]); |