This commit is contained in:
xuliangzhan
2019-05-31 20:27:39 +08:00
parent e3cf7b038a
commit c6397e6eb4
4 changed files with 144 additions and 22 deletions

View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.dd7dc0b3.css rel=preload as=style><link href=/vxe-table/static/css/index.6a1b3a11.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.de52331a.js rel=preload as=script><link href=/vxe-table/static/js/index.e7823803.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.dd7dc0b3.css rel=stylesheet><link href=/vxe-table/static/css/index.6a1b3a11.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.de52331a.js></script><script src=/vxe-table/static/js/index.e7823803.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vxe-table/favicon.ico><title>vxe-table 表格</title><link href=/vxe-table/static/css/chunk-vendors.dd7dc0b3.css rel=preload as=style><link href=/vxe-table/static/css/index.6a1b3a11.css rel=preload as=style><link href=/vxe-table/static/js/chunk-vendors.de52331a.js rel=preload as=script><link href=/vxe-table/static/js/index.055b75e3.js rel=preload as=script><link href=/vxe-table/static/css/chunk-vendors.dd7dc0b3.css rel=stylesheet><link href=/vxe-table/static/css/index.6a1b3a11.css rel=stylesheet></head><body><noscript><strong>We're sorry but vxe-table doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vxe-table/static/js/chunk-vendors.de52331a.js></script><script src=/vxe-table/static/js/index.055b75e3.js></script></body></html>

File diff suppressed because one or more lines are too long

View File

@@ -2,7 +2,7 @@
<div>
<p>element-ui 使用分页</p>
<el-form ref="tableform" :model="formData" inline size="small">
<el-form ref="tableform" :model="formData" inline>
<el-form-item label="名字" prop="name">
<el-input v-model="formData.name" placeholder="名字"></el-input>
</el-form-item>
@@ -17,10 +17,19 @@
</el-form-item>
</el-form>
<vxe-table-toolbar size="small" :customs="customColumns" setting>
<vxe-table-toolbar :customs="customColumns" setting>
<template v-slot:buttons>
<vxe-button @click="insertEvent">新增</vxe-button>
<vxe-button @click="saveEvent">保存</vxe-button>
<el-button @click="insertEvent">新增</el-button>
<el-button @click="saveEvent">保存</el-button>
<el-dropdown @command="dropdownMenuEvent">
<el-button>
操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="remove">删除选中</el-dropdown-item>
<el-dropdown-item command="export">导出数据</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</vxe-table-toolbar>
@@ -30,7 +39,6 @@
ref="xTable"
class="vxe-table-element"
height="460"
size="small"
:loading="loading"
:data.sync="tableData"
:customs.sync="customColumns"
@@ -108,10 +116,19 @@ export default {
</el-form-item>
</el-form>
<vxe-table-toolbar size="small" :customs="customColumns" setting>
<vxe-table-toolbar :customs="customColumns" setting>
<template v-slot:buttons>
<vxe-button @click="insertEvent">新增</vxe-button>
<vxe-button @click="saveEvent">保存</vxe-button>
<el-button @click="insertEvent">新增</el-button>
<el-button @click="saveEvent">保存</el-button>
<el-dropdown @command="dropdownMenuEvent">
<el-button>
操作<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="remove">删除选中</el-dropdown-item>
<el-dropdown-item command="export">导出数据</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</vxe-table-toolbar>
@@ -216,7 +233,29 @@ export default {
},
saveEvent () {
let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getAllRecords()
alert(\`insertRecords=\${insertRecords.length}, removeRecords=\${removeRecords.length}, updateRecords=\${updateRecords.length}\`)
if (insertRecords.length || removeRecords.length || updateRecords.length) {
this.$message({ message: '保存成功!', type: 'success' })
this.searchEvent()
} else {
this.$message({ message: '数据未改动!' })
}
},
dropdownMenuEvent (name) {
switch (name) {
case 'remove': {
let selectRecords = this.$refs.xTable.getSelectRecords()
if (selectRecords.length) {
this.$refs.xTable.removeSelecteds()
} else {
this.$message({ message: '请至少选择一条数据!' })
}
break
}
case 'export': {
this.$refs.xTable.exportCsv()
break
}
}
},
searchEvent () {
this.pageVO.currentPage = 1
@@ -296,7 +335,29 @@ export default {
},
saveEvent () {
let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getAllRecords()
alert(`insertRecords=${insertRecords.length}, removeRecords=${removeRecords.length}, updateRecords=${updateRecords.length}`)
if (insertRecords.length || removeRecords.length || updateRecords.length) {
this.$message({ message: '保存成功!', type: 'success' })
this.searchEvent()
} else {
this.$message({ message: '数据未改动!' })
}
},
dropdownMenuEvent (name) {
switch (name) {
case 'remove': {
let selectRecords = this.$refs.xTable.getSelectRecords()
if (selectRecords.length) {
this.$refs.xTable.removeSelecteds()
} else {
this.$message({ message: '请至少选择一条数据!' })
}
break
}
case 'export': {
this.$refs.xTable.exportCsv()
break
}
}
},
searchEvent () {
this.pageVO.currentPage = 1

View File

@@ -2,7 +2,7 @@
<div>
<p>iview 使用首页</p>
<Form ref="tableform" :model="formData" inline size="small">
<Form ref="tableform" :model="formData" inline>
<FormItem prop="name">
<Input type="text" v-model="formData.name" placeholder="Username"/>
</FormItem>
@@ -17,10 +17,19 @@
</FormItem>
</Form>
<vxe-table-toolbar size="small" :customs="customColumns" setting>
<vxe-table-toolbar :customs="customColumns" setting>
<template v-slot:buttons>
<vxe-button @click="insertEvent">新增</vxe-button>
<vxe-button @click="saveEvent">保存</vxe-button>
<Button @click="insertEvent">新增</Button>
<Button @click="saveEvent">保存</Button>
<Dropdown @on-click="dropdownMenuEvent">
<Button>
操作<Icon type="ios-arrow-down"></Icon>
</Button >
<DropdownMenu slot="list">
<DropdownItem name="remove">删除选中</DropdownItem>
<DropdownItem name="export">导出数据</DropdownItem>
</DropdownMenu>
</Dropdown>
</template>
</vxe-table-toolbar>
@@ -30,7 +39,6 @@
ref="xTable"
class="vxe-table-iview"
height="460"
size="small"
:loading="loading"
:data.sync="tableData"
:customs.sync="customColumns"
@@ -107,10 +115,19 @@ export default {
</FormItem>
</Form>
<vxe-table-toolbar size="small" :customs="customColumns" setting>
<vxe-table-toolbar :customs="customColumns" setting>
<template v-slot:buttons>
<vxe-button @click="insertEvent">新增</vxe-button>
<vxe-button @click="saveEvent">保存</vxe-button>
<Button @click="insertEvent">新增</Button>
<Button @click="saveEvent">保存</Button>
<Dropdown @on-click="dropdownMenuEvent">
<Button>
操作<Icon type="ios-arrow-down"></Icon>
</Button >
<DropdownMenu slot="list">
<DropdownItem name="remove">删除选中</DropdownItem>
<DropdownItem name="export">导出数据</DropdownItem>
</DropdownMenu>
</Dropdown>
</template>
</vxe-table-toolbar>
@@ -210,7 +227,29 @@ export default {
},
saveEvent () {
let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getAllRecords()
alert(\`insertRecords=\${insertRecords.length}, removeRecords=\${removeRecords.length}, updateRecords=\${updateRecords.length}\`)
if (insertRecords.length || removeRecords.length || updateRecords.length) {
this.$Message.success('保存成功!')
this.searchEvent()
} else {
this.$Message.info('数据未改动!')
}
},
dropdownMenuEvent (name) {
switch (name) {
case 'remove': {
let selectRecords = this.$refs.xTable.getSelectRecords()
if (selectRecords.length) {
this.$refs.xTable.removeSelecteds()
} else {
this.$Message.info('请至少选择一条数据!')
}
break
}
case 'export': {
this.$refs.xTable.exportCsv()
break
}
}
},
searchEvent () {
this.pageVO.currentPage = 1
@@ -280,7 +319,29 @@ export default {
},
saveEvent () {
let { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getAllRecords()
alert(`insertRecords=${insertRecords.length}, removeRecords=${removeRecords.length}, updateRecords=${updateRecords.length}`)
if (insertRecords.length || removeRecords.length || updateRecords.length) {
this.$Message.success('保存成功!')
this.searchEvent()
} else {
this.$Message.info('数据未改动!')
}
},
dropdownMenuEvent (name) {
switch (name) {
case 'remove': {
let selectRecords = this.$refs.xTable.getSelectRecords()
if (selectRecords.length) {
this.$refs.xTable.removeSelecteds()
} else {
this.$Message.info('请至少选择一条数据!')
}
break
}
case 'export': {
this.$refs.xTable.exportCsv()
break
}
}
},
searchEvent () {
this.pageVO.currentPage = 1