diff --git a/src/components/list/QueryList.vue b/src/components/list/QueryList.vue
index 6e8c417..cc77c23 100644
--- a/src/components/list/QueryList.vue
+++ b/src/components/list/QueryList.vue
@@ -79,8 +79,24 @@
+
+
新建
+
批量操作
+
+
+ 删除
+ 审批
+
+
+ 更多操作
+
+
+
@@ -99,8 +115,11 @@ import ADatePicker from 'vue-antd-ui/es/date-picker/index'
import AButton from 'vue-antd-ui/es/button/button'
import AIcon from 'vue-antd-ui/es/icon/icon'
import StandardTable from '../table/StandardTable'
+import ADropdown from 'vue-antd-ui/es/dropdown'
+import AMenu from 'vue-antd-ui/es/menu/index'
const ASelectOption = ASelect.Option
+const AMenuItem = AMenu.Item
const columns = [
{
@@ -115,26 +134,40 @@ const columns = [
title: '服务调用次数',
dataIndex: 'callNo',
sorter: true,
- needTotal: true
+ needTotal: true,
+ customRender: (text) => text + ' 次'
},
{
title: '状态',
- dataIndex: 'status'
+ dataIndex: 'status',
+ needTotal: true
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true
- },
- {
- title: '操作',
- key: 'action'
}
]
+const dataSource = []
+
+for (let i = 0; i < 100; i++) {
+ dataSource.push({
+ key: i,
+ no: 'NO ' + i,
+ description: '这是一段描述',
+ callNo: Math.floor(Math.random() * 1000),
+ status: Math.floor(Math.random() * 10) % 4,
+ updatedAt: '2018-07-26'
+ })
+}
+
export default {
name: 'QueryList',
components: {
+ AMenuItem,
+ AMenu,
+ ADropdown,
StandardTable,
AIcon,
AButton,
@@ -151,12 +184,38 @@ export default {
data () {
return {
advanced: true,
- columns: columns
+ columns: columns,
+ dataSource: dataSource,
+ selectedRowKeys: [],
+ selectedRows: []
}
},
methods: {
toggleAdvanced () {
this.advanced = !this.advanced
+ },
+ onchange (selectedRowKeys, selectedRows) {
+ this.selectedRowKeys = selectedRowKeys
+ this.selectedRows = selectedRows
+ },
+ remove () {
+ this.dataSource = this.dataSource.filter(item => this.selectedRowKeys.indexOf(item.key) < 0)
+ this.selectedRows = this.selectedRows.filter(item => this.selectedRowKeys.indexOf(item.key) < 0)
+ },
+ addNew () {
+ this.dataSource.unshift({
+ key: this.dataSource.length,
+ no: 'NO ' + this.dataSource.length,
+ description: '这是一段描述',
+ callNo: Math.floor(Math.random() * 1000),
+ status: Math.floor(Math.random() * 10) % 4,
+ updatedAt: '2018-07-26'
+ })
+ },
+ handleMenuClick (e) {
+ if (e.key === 'delete') {
+ this.remove()
+ }
}
}
}
@@ -170,6 +229,9 @@ export default {
width: calc(100% - 216px);
display: inline-block
}
+ .operator{
+ margin-bottom: 18px;
+ }
@media screen and (max-width: 900px) {
.fold {
width: 100%;
diff --git a/src/components/table/StandardTable.vue b/src/components/table/StandardTable.vue
index 76fe27d..341e3be 100644
--- a/src/components/table/StandardTable.vue
+++ b/src/components/table/StandardTable.vue
@@ -1,11 +1,16 @@
@@ -16,17 +21,65 @@
:dataSource="dataSource"
:rowKey="rowKey"
:pagination="pagination"
- />
+ :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
+ >
+