lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity
Files
5f4fe76bc46c13d226ff406ebeea7ab31d08b4f4
vxe-table/docs/static/js/plugin.192222e2.js
xuliangzhan 982dc1ffb0 update
2019-06-25 12:04:44 +08:00

1 line
79 KiB
JavaScript
Raw Blame History

(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-table",{staticClass:"vxe-table-antd",attrs:{border:"","show-overflow":"",height:"460",loading:e.loading,data:e.tableData,"edit-config":{key:"id",trigger:"click",mode:"cell"}},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",label:"Number",width:"80",fixed:"left"}}),n("vxe-table-column",{attrs:{prop:"name",label:"AInput","min-width":"140","edit-render":{name:"AInput"}}}),n("vxe-table-column",{attrs:{prop:"role",label:"AAutoComplete",width:"160","edit-render":{name:"AAutoComplete",props:e.ACProps,events:{search:e.roleSearchEvent}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"AInputNumber",width:"160","edit-render":{name:"AInputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{prop:"sex",label:"ASelect",width:"140","edit-render":{name:"ASelect",options:e.sexList}}}),n("vxe-table-column",{attrs:{prop:"sex1",label:"ASelect",width:"160","edit-render":{name:"ASelect",options:e.sexList,props:{mode:"multiple"}}}}),n("vxe-table-column",{attrs:{prop:"sex2",label:"ASelect",width:"140","edit-render":{name:"ASelect",optionGroups:e.sexGroupList}}}),n("vxe-table-column",{attrs:{prop:"region",label:"ACascader",width:"200","edit-render":{name:"ACascader",props:{options:e.regionList}}}}),n("vxe-table-column",{attrs:{prop:"date7",label:"ADatePicker",width:"140","edit-render":{name:"ADatePicker",props:{type:"date",format:"YYYY/MM/DD"}}}}),n("vxe-table-column",{attrs:{prop:"date8",label:"AMonthPicker",width:"140","edit-render":{name:"AMonthPicker"}}}),n("vxe-table-column",{attrs:{prop:"date9",label:"AWeekPicker",width:"140","edit-render":{name:"AWeekPicker"}}}),n("vxe-table-column",{attrs:{prop:"date11",label:"ARangePicker",width:"240","edit-render":{name:"ARangePicker"}}}),n("vxe-table-column",{attrs:{prop:"date10",label:"ATimePicker",width:"140","edit-render":{name:"ATimePicker"}}}),n("vxe-table-column",{attrs:{prop:"attr1",label:"ATreeSelect",width:"140","edit-render":{name:"ATreeSelect",props:{treeData:e.treeData}}}}),n("vxe-table-column",{attrs:{prop:"attr2",label:"ATreeSelect",width:"140","edit-render":{name:"ATreeSelect",props:{treeData:e.treeData,treeCheckable:!0}}}}),n("vxe-table-column",{attrs:{prop:"flag",label:"ASwitch",width:"100","edit-render":{name:"ASwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{prop:"rate",label:"ARate",width:"200",fixed:"right","edit-render":{name:"ARate",type:"visible"}}})],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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i=n("1487"),s=n.n(i),d={data:function(){return{loading:!1,tableData:[],restaurants:["前端","后端","开发","测试"],ACProps:{dataSource:[]},sexList:[],regionList:[],treeData:[{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"}]}],sexGroupList:[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}],demoCodes:['\n <vxe-table\n border\n show-overflow\n class="vxe-table-antd"\n height="460"\n :loading="loading"\n :data.sync="tableData"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'cell\'}">\n <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="index" label="Number" width="80" fixed="left"></vxe-table-column>\n <vxe-table-column prop="name" label="AInput" min-width="140" :edit-render="{name: \'AInput\'}"></vxe-table-column>\n <vxe-table-column prop="role" label="AAutoComplete" width="160" :edit-render="{name: \'AAutoComplete\', props: ACProps, events: {search: roleSearchEvent}}"></vxe-table-column>\n <vxe-table-column prop="age" label="AInputNumber" width="160" :edit-render="{name: \'AInputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column prop="sex" label="ASelect" width="140" :edit-render="{name: \'ASelect\', options: sexList}"></vxe-table-column>\n <vxe-table-column prop="sex1" label="ASelect" width="160" :edit-render="{name: \'ASelect\', options: sexList, props: {mode: \'multiple\'}}"></vxe-table-column>\n <vxe-table-column prop="sex2" label="ASelect" width="140" :edit-render="{name: \'ASelect\', optionGroups: sexGroupList}"></vxe-table-column>\n <vxe-table-column prop="region" label="ACascader" width="200" :edit-render="{name: \'ACascader\', props: {options: regionList}}"></vxe-table-column>\n <vxe-table-column prop="date7" label="ADatePicker" width="140" :edit-render="{name: \'ADatePicker\', props: {type: \'date\', format: \'YYYY/MM/DD\'}}"></vxe-table-column>\n <vxe-table-column prop="date8" label="AMonthPicker" width="140" :edit-render="{name: \'AMonthPicker\'}"></vxe-table-column>\n <vxe-table-column prop="date9" label="AWeekPicker" width="140" :edit-render="{name: \'AWeekPicker\'}"></vxe-table-column>\n <vxe-table-column prop="date11" label="ARangePicker" width="240" :edit-render="{name: \'ARangePicker\'}"></vxe-table-column>\n <vxe-table-column prop="date10" label="ATimePicker" width="140" :edit-render="{name: \'ATimePicker\'}"></vxe-table-column>\n <vxe-table-column prop="attr1" label="ATreeSelect" width="140" :edit-render="{name: \'ATreeSelect\', props: {treeData}}"></vxe-table-column>\n <vxe-table-column prop="attr2" label="ATreeSelect" width="140" :edit-render="{name: \'ATreeSelect\', props: {treeData, treeCheckable: true}}"></vxe-table-column>\n <vxe-table-column prop="flag" label="ASwitch" width="100" :edit-render="{name: \'ASwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column prop="rate" label="ARate" width="200" fixed="right" :edit-render="{name: \'ARate\', type: \'visible\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\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 }\n },\n created () {\n this.loading = true\n setTimeout(() => {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\n this.loading = false\n }, 500)\n this.findSexList()\n this.findRegionList()\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 findRegionList () {\n return XEAjax.doGet('/api/conf/region/list').then(({ data }) => {\n this.regionList = data\n return data\n })\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(){var e=this;this.loading=!0,setTimeout(function(){e.tableData=window.MOCK_DATA_LIST.slice(0,100),e.loading=!1},500),this.findSexList(),this.findRegionList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return o.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return o.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;return e.regionList=n,n})},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"),p=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=p.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:{label:"名字",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:{label:"性别",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":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{key:"id",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:{prop:"name",label:"ElInput","min-width":"140","edit-render":{name:"ElInput"}}}),n("vxe-table-column",{attrs:{prop:"role",label:"ElAutocomplete",width:"160","edit-render":{name:"ElAutocomplete",props:{fetchSuggestions:e.roleFetchSuggestions}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"ElInputNumber",width:"160","edit-render":{name:"ElInputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{prop:"sex",label:"ElSelect",width:"140","edit-render":{name:"ElSelect",options:e.sexList}}}),n("vxe-table-column",{attrs:{prop:"region",label:"ElCascader",width:"200","edit-render":{name:"ElCascader",props:{options:e.regionList}}}}),n("vxe-table-column",{attrs:{prop:"date",label:"ElDatePicker",width:"200","edit-render":{name:"ElDatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-table-column",{attrs:{prop:"date1",label:"DateTimePicker",width:"220","edit-render":{name:"ElDatePicker",props:{type:"datetime",format:"yyyy-MM-dd HH:mm:ss"}}}}),n("vxe-table-column",{attrs:{prop:"date5",label:"ElTimeSelect",width:"200","edit-render":{name:"ElTimeSelect",props:{pickerOptions:{start:"08:30",step:"00:15",end:"18:30"}}}}}),n("vxe-table-column",{attrs:{prop:"flag",label:"ElSwitch",width:"100","edit-render":{name:"ElSwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{prop:"rate",label:"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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i=n("1487"),s=n.n(i),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 label="名字" prop="name">\n <el-input v-model="formData.name" placeholder="名字"></el-input>\n </el-form-item>\n <el-form-item label="角色" 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 ref="xTable"\n class="vxe-table-element"\n height="460"\n size="small"\n :loading="loading"\n :data.sync="tableData"\n :edit-rules="validRules"\n :edit-config="{key: \'id\', 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 prop="name" label="ElInput" min-width="140" :edit-render="{name: \'ElInput\'}"></vxe-table-column>\n <vxe-table-column prop="role" label="ElAutocomplete" width="160" :edit-render="{name: \'ElAutocomplete\', props: {fetchSuggestions: roleFetchSuggestions}}"></vxe-table-column>\n <vxe-table-column prop="age" label="ElInputNumber" width="160" :edit-render="{name: \'ElInputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column prop="sex" label="ElSelect" width="140" :edit-render="{name: \'ElSelect\', options: sexList}"></vxe-table-column>\n <vxe-table-column prop="region" label="ElCascader" width="200" :edit-render="{name: \'ElCascader\', props: {options: regionList}}"></vxe-table-column>\n <vxe-table-column prop="date" label="ElDatePicker" width="200" :edit-render="{name: \'ElDatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-table-column>\n <vxe-table-column prop="date1" label="DateTimePicker" width="220" :edit-render="{name: \'ElDatePicker\', props: {type: \'datetime\', format: \'yyyy-MM-dd HH:mm:ss\'}}"></vxe-table-column>\n <vxe-table-column prop="date5" label="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 prop="flag" label="ElSwitch" width="100" :edit-render="{name: \'ElSwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column prop="rate" label="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.getAllRecords()\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,o.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,r=n.result;e.tableData=r,e.tablePage.totalResult=a.totalResult,e.loading=!1}).catch(function(t){e.loading=!1})},findSexList:function(){var e=this;return o.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return o.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.getAllRecords(),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"),p=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=p.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-table",{staticClass:"vxe-table-iview",attrs:{border:"","show-overflow":"",height:"600",loading:e.loading,data:e.tableData,"edit-config":{key:"id",trigger:"click",mode:"cell"}},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",label:"Number",width:"80",fixed:"left"}}),n("vxe-table-column",{attrs:{prop:"name",label:"Input","min-width":"140","edit-render":{name:"Input"}}}),n("vxe-table-column",{attrs:{prop:"role",label:"AutoComplete","min-width":"160","edit-render":{name:"AutoComplete",props:{data:e.restaurants,filterMethod:e.roleFilterMethod}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"InputNumber",width:"140","edit-render":{name:"InputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{prop:"sex",label:"Select",width:"140","edit-render":{name:"Select",options:e.sexList}}}),n("vxe-table-column",{attrs:{prop:"sex1",label:"Select",width:"140","edit-render":{name:"Select",options:e.sexList,props:{multiple:!0,clearable:!0}}}}),n("vxe-table-column",{attrs:{prop:"sex2",label:"Select",width:"140","edit-render":{name:"Select",options:e.sexList,optionGroups:e.sexGroupList,props:{clearable:!0}}}}),n("vxe-table-column",{attrs:{prop:"region",label:"Cascader",width:"200","edit-render":{name:"Cascader",props:{data:e.regionList}}}}),n("vxe-table-column",{attrs:{prop:"date",label:"DatePicker",width:"200","edit-render":{name:"DatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-table-column",{attrs:{prop:"date2",label:"TimePicker",width:"200","edit-render":{name:"TimePicker",props:{type:"time"}}}}),n("vxe-table-column",{attrs:{prop:"flag",label:"iSwitch",width:"100","edit-render":{name:"iSwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{prop:"rate",label:"Rate",width:"200",fixed:"right","edit-render":{name:"Rate",type:"visible"}}})],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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i=n("1487"),s=n.n(i),d={data:function(){return{loading:!1,tableData:[],sexList:[],regionList:[],restaurants:["前端","后端","开发","测试"],sexGroupList:[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}],demoCodes:['\n <vxe-table\n border\n show-overflow\n class="vxe-table-iview"\n height="600"\n :loading="loading"\n :data.sync="tableData"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'cell\'}">\n <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="index" label="Number" width="80" fixed="left"></vxe-table-column>\n <vxe-table-column prop="name" label="Input" min-width="140" :edit-render="{name: \'Input\'}"></vxe-table-column>\n <vxe-table-column prop="role" label="AutoComplete" min-width="160" :edit-render="{name: \'AutoComplete\', props: {data: restaurants, filterMethod: roleFilterMethod}}"></vxe-table-column>\n <vxe-table-column prop="age" label="InputNumber" width="140" :edit-render="{name: \'InputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column prop="sex" label="Select" width="140" :edit-render="{name: \'Select\', options: sexList}"></vxe-table-column>\n <vxe-table-column prop="sex1" label="Select" width="140" :edit-render="{name: \'Select\', options: sexList, props: {multiple: true, clearable: true}}"></vxe-table-column>\n <vxe-table-column prop="sex2" label="Select" width="140" :edit-render="{name: \'Select\', options: sexList, optionGroups: sexGroupList, props: {clearable: true}}"></vxe-table-column>\n <vxe-table-column prop="region" label="Cascader" width="200" :edit-render="{name: \'Cascader\', props: {data: regionList}}"> </vxe-table-column>\n <vxe-table-column prop="date" label="DatePicker" width="200" :edit-render="{name: \'DatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-table-column>\n <vxe-table-column prop="date2" label="TimePicker" width="200" :edit-render="{name: \'TimePicker\', props: {type: \'time\'}}"></vxe-table-column>\n <vxe-table-column prop="flag" label="iSwitch" width="100" :edit-render="{name: \'iSwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column prop="rate" label="Rate" width="200" fixed="right" :edit-render="{name: \'Rate\', type: \'visible\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\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 }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\n },\n methods: {\n nameChangeEvent ({ row }, event) {\n console.log(event)\n }\n }\n }\n "]}},created:function(){var e=this;this.loading=!0,setTimeout(function(){var t=window.MOCK_DATA_LIST.slice(0,100);e.tableData=t,e.loading=!1},500),this.findSexList(),this.findRegionList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return o.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return o.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;return e.regionList=n,n})},roleFilterMethod:function(e,t){return-1!==t.toUpperCase().indexOf((e||"").toUpperCase())}}},c=d,u=n("2877"),p=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=p.exports},"84b6":function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-table",{attrs:{border:"","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:{prop:"name",label:"ElInput",filters:[{data:""}],"filter-render":{name:"ElInput",props:{placeholder:"请输入名称"}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"ElInputNumber",sortable:"",filters:[{data:0}],"filter-render":{name:"ElInputNumber",props:{min:0,max:100}}}}),n("vxe-table-column",{attrs:{prop:"role",label:"ElAutocomplete",filters:[{data:""}],"filter-render":{name:"ElAutocomplete",props:{fetchSuggestions:e.roleFetchSuggestions,placeholder:"请输入角色名称"}}}}),n("vxe-table-column",{attrs:{prop:"date3",label:"ElDatePicker",filters:[{data:[]}],"filter-render":{name:"ElDatePicker",props:{type:"daterange",rangeSeparator:"至",startPlaceholder:"开始日期",endPlaceholder:"结束日期"}}}})],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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i={data:function(){return{tableData:[],restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"},{value:"开发",name:"开发"},{value:"测试",name:"测试"}],demoCodes:['\n <vxe-table\n border\n highlight-hover-row\n height="400"\n :data.sync="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column prop="name" label="ElInput" :filters="[{data: \'\'}]" :filter-render="{name: \'ElInput\', props: {placeholder: \'请输入名称\'}}"></vxe-table-column>\n <vxe-table-column prop="age" label="ElInputNumber" sortable :filters="[{data: 0}]" :filter-render="{name: \'ElInputNumber\', props: {min: 0, max: 100}}"></vxe-table-column>\n <vxe-table-column prop="role" label="ElAutocomplete" :filters="[{data: \'\'}]" :filter-render="{name: \'ElAutocomplete\', props: {fetchSuggestions: roleFetchSuggestions, placeholder: \'请输入角色名称\'}}"></vxe-table-column>\n <vxe-table-column prop="date3" label="ElDatePicker" :filters="[{data: []}]" :filter-render="{name: \'ElDatePicker\', props: {type: \'daterange\', rangeSeparator: \'至\', startPlaceholder: \'开始日期\', endPlaceholder: \'结束日期\'}}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n restaurants: [\n { value: '前端', name: '前端' },\n { value: '后端', name: '后端' },\n { value: '开发', name: '开发' },\n { value: '测试', name: '测试' }\n ]\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n },\n methods: {\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.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})},methods:{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())}}}},s=i,d=n("2877"),c=Object(d["a"])(s,a,r,!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-table",{staticClass:"vxe-table-element",attrs:{border:"","show-overflow":"",height:"600",loading:e.loading,data:e.tableData,"edit-config":{key:"id",trigger:"click",mode:"cell"}},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",label:"Number",width:"80",fixed:"left"}}),n("vxe-table-column",{attrs:{prop:"name",label:"ElInput","min-width":"140","edit-render":{name:"ElInput"}}}),n("vxe-table-column",{attrs:{prop:"role",label:"ElAutocomplete",width:"160","edit-render":{name:"ElAutocomplete",props:{fetchSuggestions:e.roleFetchSuggestions}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"ElInputNumber",width:"160","edit-render":{name:"ElInputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{prop:"sex",label:"ElSelect",width:"140","edit-render":{name:"ElSelect",options:e.sexList}}}),n("vxe-table-column",{attrs:{prop:"sex1",label:"ElSelect",width:"160","edit-render":{name:"ElSelect",options:e.sexList,props:{multiple:!0,clearable:!0}}}}),n("vxe-table-column",{attrs:{prop:"sex2",label:"ElSelect",width:"140","edit-render":{name:"ElSelect",optionGroups:e.sexGroupList,props:{clearable:!0}}}}),n("vxe-table-column",{attrs:{prop:"region",label:"ElCascader",width:"200","edit-render":{name:"ElCascader",props:{options:e.regionList}}}}),n("vxe-table-column",{attrs:{prop:"date",label:"ElDatePicker",width:"200","edit-render":{name:"ElDatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-table-column",{attrs:{prop:"date1",label:"DateTimePicker",width:"220","edit-render":{name:"ElDatePicker",props:{type:"datetime",format:"yyyy-MM-dd HH:mm:ss"}}}}),n("vxe-table-column",{attrs:{prop:"date5",label:"ElTimeSelect",width:"200","edit-render":{name:"ElTimeSelect",props:{pickerOptions:{start:"08:30",step:"00:15",end:"18:30"}}}}}),n("vxe-table-column",{attrs:{prop:"flag",label:"ElSwitch",width:"100","edit-render":{name:"ElSwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{prop:"rate",label:"ElRate",width:"200",fixed:"right","edit-render":{name:"ElRate",type:"visible"}}})],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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i=n("1487"),s=n.n(i),d={data:function(){return{loading:!1,tableData:[],sexList:[],regionList:[],restaurants:[{value:"前端",name:"前端"},{value:"后端",name:"后端"},{value:"开发",name:"开发"},{value:"测试",name:"测试"}],sexGroupList:[{label:"分组1",options:[{label:"男",value:"1"}]},{label:"分组2",options:[{label:"女",value:"0"}]}],demoCodes:['\n <vxe-table\n border\n show-overflow\n class="vxe-table-element"\n height="600"\n :loading="loading"\n :data.sync="tableData"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'cell\'}">\n <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="index" label="Number" width="80" fixed="left"></vxe-table-column>\n <vxe-table-column prop="name" label="ElInput" min-width="140" :edit-render="{name: \'ElInput\'}"></vxe-table-column>\n <vxe-table-column prop="role" label="ElAutocomplete" width="160" :edit-render="{name: \'ElAutocomplete\', props: {fetchSuggestions: roleFetchSuggestions}}"></vxe-table-column>\n <vxe-table-column prop="age" label="ElInputNumber" width="160" :edit-render="{name: \'ElInputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column prop="sex" label="ElSelect" width="140" :edit-render="{name: \'ElSelect\', options: sexList}"></vxe-table-column>\n <vxe-table-column prop="sex1" label="ElSelect" width="140" :edit-render="{name: \'ElSelect\', options: sexList, props: {multiple: true, clearable: true}}"></vxe-table-column>\n <vxe-table-column prop="sex2" label="ElSelect" width="140" :edit-render="{name: \'ElSelect\', optionGroups: sexGroupList, props: {clearable: true}}"></vxe-table-column>\n <vxe-table-column prop="region" label="ElCascader" width="200" :edit-render="{name: \'ElCascader\', props: {options: regionList}}"></vxe-table-column>\n <vxe-table-column prop="date" label="ElDatePicker" width="200" :edit-render="{name: \'ElDatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-table-column>\n <vxe-table-column prop="date1" label="DateTimePicker" width="220" :edit-render="{name: \'ElDatePicker\', props: {type: \'datetime\', format: \'yyyy-MM-dd HH:mm:ss\'}}"></vxe-table-column>\n <vxe-table-column prop="date5" label="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 prop="flag" label="ElSwitch" width="100" :edit-render="{name: \'ElSwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column prop="rate" label="ElRate" width="200" fixed="right" :edit-render="{name: \'ElRate\', type: \'visible\'}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n loading: false,\n tableData: [],\n sexList: [],\n regionList: [],\n restaurants: [\n { value: '前端', name: '前端' },\n { value: '后端', name: '后端' }\n ],\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 }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 100)\n },\n methods: {\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(){var t=window.MOCK_DATA_LIST.slice(0,100);e.tableData=t,e.loading=!1},500),this.findSexList(),this.findRegionList()},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){s.a.highlightBlock(e)})},methods:{findSexList:function(){var e=this;return o.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return o.a.doGet("/api/conf/region/list").then(function(t){var n=t.data;return e.regionList=n,n})},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"),p=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=p.exports},ac90:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-table",{attrs:{border:"","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:{prop:"name",label:"Input",filters:[{data:""}],"filter-render":{name:"Input",props:{placeholder:"请输入名称"}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"InputNumber",sortable:"",filters:[{data:0}],"filter-render":{name:"InputNumber",props:{min:0,max:100}}}}),n("vxe-table-column",{attrs:{prop:"role",label:"AutoComplete",filters:[{data:""}],"filter-render":{name:"AutoComplete",props:{data:e.restaurants,filterMethod:e.roleFilterMethod,placeholder:"请输入角色名称"}}}}),n("vxe-table-column",{attrs:{prop:"date3",label:"DatePicker",filters:[{data:[]}],"filter-render":{name:"DatePicker",props:{type:"daterange",rangeSeparator:"至",startPlaceholder:"开始日期",endPlaceholder:"结束日期"}}}})],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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i={data:function(){return{tableData:[],restaurants:["前端","后端","开发","测试"],demoCodes:['\n <vxe-table\n border\n highlight-hover-row\n height="400"\n :data.sync="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column prop="name" label="Input" :filters="[{data: null}]" :filter-render="{name: \'Input\', props: {placeholder: \'请输入名称\'}}"></vxe-table-column>\n <vxe-table-column prop="age" label="InputNumber" sortable :filters="[{data: 0}]" :filter-render="{name: \'InputNumber\', props: {min: 0, max: 100}}"></vxe-table-column>\n <vxe-table-column prop="role" label="AutoComplete" :filters="[{data: \'\'}]" :filter-render="{name: \'AutoComplete\', props: {data: restaurants, filterMethod: roleFilterMethod, placeholder: \'请输入角色名称\'}}"></vxe-table-column>\n <vxe-table-column prop="date3" label="DatePicker" :filters="[{data: []}]" :filter-render="{name: \'DatePicker\', props: {type: \'daterange\', rangeSeparator: \'至\', startPlaceholder: \'开始日期\', endPlaceholder: \'结束日期\'}}"></vxe-table-column>\n </vxe-table>\n ',"\n export default {\n data () {\n return {\n tableData: [],\n restaurants: ['前端', '后端', '开发', '测试']\n }\n },\n created () {\n this.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n },\n methods: {\n roleFilterMethod (value, option) {\n return option.toUpperCase().indexOf((value || '').toUpperCase()) !== -1\n }\n }\n }\n "]}},created:function(){this.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})},methods:{roleFilterMethod:function(e,t){return-1!==t.toUpperCase().indexOf((e||"").toUpperCase())}}},s=i,d=n("2877"),c=Object(d["a"])(s,a,r,!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:{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":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{key:"id",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:{prop:"name",label:"Input","min-width":"140","edit-render":{name:"Input"}}}),n("vxe-table-column",{attrs:{prop:"role",label:"AutoComplete","min-width":"160","edit-render":{name:"AutoComplete",props:{data:e.restaurants,filterMethod:e.roleFilterMethod}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"InputNumber",width:"140","edit-render":{name:"InputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{prop:"sex",label:"Select",width:"140","edit-render":{name:"Select",options:e.sexList}}}),n("vxe-table-column",{attrs:{prop:"region",label:"Cascader",width:"200","edit-render":{name:"Cascader",props:{data:e.regionList}}}}),n("vxe-table-column",{attrs:{prop:"date",label:"DatePicker",width:"200","edit-render":{name:"DatePicker",props:{type:"date",format:"yyyy/MM/dd"}}}}),n("vxe-table-column",{attrs:{prop:"date6",label:"TimePicker",width:"200","edit-render":{name:"TimePicker",props:{type:"time"}}}}),n("vxe-table-column",{attrs:{prop:"flag",label:"iSwitch",width:"100","edit-render":{name:"iSwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{prop:"rate",label:"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",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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i=n("1487"),s=n.n(i),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 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="{key: \'id\', 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 prop="name" label="Input" min-width="140" :edit-render="{name: \'Input\'}"></vxe-table-column>\n <vxe-table-column prop="role" label="AutoComplete" min-width="160" :edit-render="{name: \'AutoComplete\', props: {data: restaurants, filterMethod: roleFilterMethod}}"></vxe-table-column>\n <vxe-table-column prop="age" label="InputNumber" width="140" :edit-render="{name: \'InputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column prop="sex" label="Select" width="140" :edit-render="{name: \'Select\', options: sexList}"></vxe-table-column>\n <vxe-table-column prop="region" label="Cascader" width="200" :edit-render="{name: \'Cascader\', props: {data: regionList}}"> </vxe-table-column>\n <vxe-table-column prop="date" label="DatePicker" width="200" :edit-render="{name: \'DatePicker\', props: {type: \'date\', format: \'yyyy/MM/dd\'}}"></vxe-table-column>\n <vxe-table-column prop="date6" label="TimePicker" width="200" :edit-render="{name: \'TimePicker\', props: {type: \'time\'}}"></vxe-table-column>\n <vxe-table-column prop="flag" label="iSwitch" width="100" :edit-render="{name: \'iSwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column prop="rate" label="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 :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.getAllRecords()\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,o.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,r=n.result;e.tableData=r,e.tablePage.totalResult=a.totalResult,e.loading=!1}).catch(function(t){e.loading=!1})},findSexList:function(){var e=this;return o.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return o.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.getAllRecords(),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"),p=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=p.exports},e2c5:function(e,t,n){"use strict";n.r(t);var a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("vxe-table",{attrs:{border:"","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:{prop:"name",label:"AInput",filters:[{data:""}],"filter-render":{name:"AInput",props:{placeholder:"请输入名称"}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"AInputNumber",sortable:"",filters:[{data:0}],"filter-render":{name:"AInputNumber",props:{min:0,max:100}}}}),n("vxe-table-column",{attrs:{prop:"role",label:"AAutoComplete",filters:[{data:""}],"filter-render":{name:"AAutoComplete",props:e.ACProps,events:{search:e.roleSearchEvent}}}})],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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i={data:function(){return{tableData:[],restaurants:["前端","后端","开发","测试"],ACProps:{dataSource:[],placeholder:"请输入角色名称"},demoCodes:['\n <vxe-table\n border\n highlight-hover-row\n height="400"\n :data.sync="tableData">\n <vxe-table-column type="index" width="60"></vxe-table-column>\n <vxe-table-column prop="name" label="AInput" :filters="[{data: null}]" :filter-render="{name: \'AInput\', props: {placeholder: \'请输入名称\'}}"></vxe-table-column>\n <vxe-table-column prop="age" label="AInputNumber" sortable :filters="[{data: 0}]" :filter-render="{name: \'AInputNumber\', props: {min: 0, max: 100}}"></vxe-table-column>\n <vxe-table-column prop="role" label="AAutoComplete" :filters="[{data: \'\'}]" :filter-render="{name: \'AAutoComplete\', props: ACProps, events: {search: roleSearchEvent}}"></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.tableData = window.MOCK_DATA_LIST.slice(0, 50)\n },\n methods: {\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.tableData=window.MOCK_DATA_LIST.slice(0,50)},mounted:function(){Array.from(this.$el.querySelectorAll("pre code")).forEach(function(e){o.a.highlightBlock(e)})},methods:{roleSearchEvent:function(e,t){e.row;this.ACProps.dataSource=this.restaurants.filter(function(e){return-1!==e.toUpperCase().indexOf((t||"").toUpperCase())})}}},s=i,d=n("2877"),c=Object(d["a"])(s,a,r,!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:{label:"名字"}},[n("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["name"],expression:"['name']"}],attrs:{placeholder:"名字"}})],1),n("a-form-item",{attrs:{label:"性别"}},[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":"",height:"460",loading:e.loading,data:e.tableData,"edit-rules":e.validRules,"edit-config":{key:"id",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",label:"Number",width:"80",fixed:"left"}}),n("vxe-table-column",{attrs:{prop:"name",label:"AInput","min-width":"140","edit-render":{name:"AInput"}}}),n("vxe-table-column",{attrs:{prop:"role",label:"AAutoComplete",width:"160","edit-render":{name:"AAutoComplete",props:e.ACProps,events:{search:e.roleSearchEvent}}}}),n("vxe-table-column",{attrs:{prop:"age",label:"AInputNumber",width:"160","edit-render":{name:"AInputNumber",props:{max:35,min:18}}}}),n("vxe-table-column",{attrs:{prop:"sex",label:"ASelect",width:"140","edit-render":{name:"ASelect",options:e.sexList}}}),n("vxe-table-column",{attrs:{prop:"region",label:"ACascader",width:"200","edit-render":{name:"ACascader",props:{options:e.regionList}}}}),n("vxe-table-column",{attrs:{prop:"date7",label:"ADatePicker",width:"200","edit-render":{name:"ADatePicker",props:{type:"date",format:"YYYY/MM/DD"}}}}),n("vxe-table-column",{attrs:{prop:"flag",label:"ASwitch",width:"100","edit-render":{name:"ASwitch",type:"visible"}}}),n("vxe-table-column",{attrs:{prop:"rate",label:"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)},r=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[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")),o=n.n(l),i=n("1487"),s=n.n(i),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 label="名字">\n <a-input v-decorator="[\'name\']" placeholder="名字"></a-input>\n </a-form-item>\n <a-form-item label="性别">\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 class="vxe-table-antd"\n height="460"\n :loading="loading"\n :data.sync="tableData"\n :edit-rules="validRules"\n :edit-config="{key: \'id\', trigger: \'click\', mode: \'row\'}">\n <vxe-table-column type="selection" width="60" fixed="left"></vxe-table-column>\n <vxe-table-column type="index" label="Number" width="80" fixed="left"></vxe-table-column>\n <vxe-table-column prop="name" label="AInput" min-width="140" :edit-render="{name: \'AInput\'}"></vxe-table-column>\n <vxe-table-column prop="role" label="AAutoComplete" width="160" :edit-render="{name: \'AAutoComplete\', props: ACProps, events: {search: roleSearchEvent}}"></vxe-table-column>\n <vxe-table-column prop="age" label="AInputNumber" width="160" :edit-render="{name: \'AInputNumber\', props: {max: 35, min: 18}}"></vxe-table-column>\n <vxe-table-column prop="sex" label="ASelect" width="140" :edit-render="{name: \'ASelect\', options: sexList}"></vxe-table-column>\n <vxe-table-column prop="region" label="ACascader" width="200" :edit-render="{name: \'ACascader\', props: {options: regionList}}"></vxe-table-column>\n <vxe-table-column prop="date7" label="ADatePicker" width="200" :edit-render="{name: \'ADatePicker\', props: {type: \'date\', format: \'YYYY/MM/DD\'}}"></vxe-table-column>\n <vxe-table-column prop="flag" label="ASwitch" width="100" :edit-render="{name: \'ASwitch\', type: \'visible\'}"></vxe-table-column>\n <vxe-table-column prop="rate" label="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.getAllRecords()\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,o.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,r=n.result;e.tableData=r,e.tablePage.totalResult=a.totalResult,e.loading=!1}).catch(function(t){e.loading=!1})},findSexList:function(){var e=this;return o.a.doGet("/api/conf/sex/list").then(function(t){var n=t.data;return e.sexList=n,n})},findRegionList:function(){var e=this;return o.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.getAllRecords(),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"),p=Object(u["a"])(c,a,r,!1,null,null,null);t["default"]=p.exports}}]);
Reference in New Issue View Git Blame Copy Permalink