fix: table :rowSelection, Tree.jsx

src/components/CountDown/CountDown.vue

@@ -23,8 +23,7 @@
       },
       onEnd: {
         type: Function,
-        default: () => {
-        }
+        default: () => ({})
       }
     },
     data() {

src/components/Tree/Tree.jsx

@@ -10,14 +10,21 @@ export default {
       type: Array,
       required: true
     },
+    openKeys: {
+      type: Array,
+      default: () => []
+    },
     search: {
       type: Boolean,
       default: false
     }
   },
+  created () {
+    this.localOpenKeys = this.openKeys.slice(0)
+  },
   data () {
     return {
-      openKeys: []
+      localOpenKeys: []
     }
   },
   methods: {
@@ -99,7 +106,8 @@ export default {
   },
   render () {
     const { dataSource, search } = this.$props
-    
+
+    // this.localOpenKeys = openKeys.slice(0)
     const list = dataSource.map(item => {
       return this.renderItem(item)
     })
@@ -107,7 +115,7 @@ export default {
     return (
       <div class="tree-wrapper">
         { search ? this.renderSearch() : null }
-        <Menu mode="inline" class="custom-tree" {...{ on: { click: item =>  this.$emit('click', item) } }}>
+        <Menu mode="inline" class="custom-tree" {...{ on: { click: item =>  this.$emit('click', item), 'update:openKeys': val => { this.localOpenKeys = val } }}} openKeys={this.localOpenKeys}>
           { list }
         </Menu>
       </div>

src/components/page/PageLayout.vue

@@ -1,124 +1,124 @@
-<template>
-  <div :style="!$route.meta.pageHeader ? 'margin: -24px -24px 0px;' : null">
-    <!-- pageHeader , route meta hideHeader:true on hide -->
-    <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
-      <slot slot="action" name="action"></slot>
-      <slot slot="content" name="headerContent"></slot>
-      <div slot="content" v-if="!this.$slots.headerContent && desc">
-        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
-        <div class="link">
-          <template v-for="(link, index) in linkList">
-            <a :key="index" :href="link.href">
-              <a-icon :type="link.icon"/>
-              <span>{{ link.title }}</span>
-            </a>
-          </template>
-        </div>
-      </div>
-      <slot slot="extra" name="extra"></slot>
-      <div slot="pageMenu">
-        <div class="page-menu-search" v-if="search">
-          <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
-        </div>
-        <div class="page-menu-tabs" v-if="tabs && tabs.items">
-          <!-- @change="callback" :activeKey="activeKey" -->
-          <a-tabs :tabBarStyle="{margin: 0}" @change="tabs.callback" :activeKey="tabs.active()">
-            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
-          </a-tabs>
-        </div>
-      </div>
-    </page-header>
-    <div class="content">
-      <div :class="['page-header-index-wide']">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import PageHeader from './PageHeader'
-
-  export default {
-    name: 'LayoutContent',
-    components: {
-      PageHeader
-    },
-    // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
-    props: {
-      desc: {
-        type: String,
-        default: null
-      },
-      logo: {
-        type: String,
-        default: null
-      },
-      title: {
-        type: String,
-        default: null
-      },
-      avatar: {
-        type: String,
-        default: null
-      },
-      linkList: {
-        type: Array,
-        default: null
-      },
-      extraImage: {
-        type: String,
-        default: null
-      },
-      search: {
-        type: Boolean,
-        default: false
-      },
-      tabs: {
-        type: Object,
-        default: () => {}
-      }
-    },
-    methods: {
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-  .content {
-    margin: 24px 24px 0;
-
-    .link {
-      margin-top: 16px;
-
-      &:not(:empty) {
-        margin-bottom: 16px;
-      }
-      a {
-        margin-right: 32px;
-        height: 24px;
-        line-height: 24px;
-        display: inline-block;
-
-        i {
-          font-size: 24px;
-          margin-right: 8px;
-          vertical-align: middle;
-        }
-        span {
-          height: 24px;
-          line-height: 24px;
-          display: inline-block;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
-  .page-menu-search {
-    text-align: center;
-    margin-bottom: 16px;
-  }
-  .page-menu-tabs {
-    margin-top: 48px;
-  }
+<template>
+  <div :style="!$route.meta.pageHeader ? 'margin: -24px -24px 0px;' : null">
+    <!-- pageHeader , route meta hideHeader:true on hide -->
+    <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
+      <slot slot="action" name="action"></slot>
+      <slot slot="content" name="headerContent"></slot>
+      <div slot="content" v-if="!this.$slots.headerContent && desc">
+        <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
+        <div class="link">
+          <template v-for="(link, index) in linkList">
+            <a :key="index" :href="link.href">
+              <a-icon :type="link.icon"/>
+              <span>{{ link.title }}</span>
+            </a>
+          </template>
+        </div>
+      </div>
+      <slot slot="extra" name="extra"></slot>
+      <div slot="pageMenu">
+        <div class="page-menu-search" v-if="search">
+          <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
+        </div>
+        <div class="page-menu-tabs" v-if="tabs && tabs.items">
+          <!-- @change="callback" :activeKey="activeKey" -->
+          <a-tabs :tabBarStyle="{margin: 0}" @change="tabs.callback" :activeKey="tabs.active()">
+            <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
+          </a-tabs>
+        </div>
+      </div>
+    </page-header>
+    <div class="content">
+      <div :class="['page-header-index-wide']">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import PageHeader from './PageHeader'
+
+  export default {
+    name: 'LayoutContent',
+    components: {
+      PageHeader
+    },
+    // ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
+    props: {
+      desc: {
+        type: String,
+        default: null
+      },
+      logo: {
+        type: String,
+        default: null
+      },
+      title: {
+        type: String,
+        default: null
+      },
+      avatar: {
+        type: String,
+        default: null
+      },
+      linkList: {
+        type: Array,
+        default: null
+      },
+      extraImage: {
+        type: String,
+        default: null
+      },
+      search: {
+        type: Boolean,
+        default: false
+      },
+      tabs: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .content {
+    margin: 24px 24px 0;
+
+    .link {
+      margin-top: 16px;
+
+      &:not(:empty) {
+        margin-bottom: 16px;
+      }
+      a {
+        margin-right: 32px;
+        height: 24px;
+        line-height: 24px;
+        display: inline-block;
+
+        i {
+          font-size: 24px;
+          margin-right: 8px;
+          vertical-align: middle;
+        }
+        span {
+          height: 24px;
+          line-height: 24px;
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+  .page-menu-search {
+    text-align: center;
+    margin-bottom: 16px;
+  }
+  .page-menu-tabs {
+    margin-top: 48px;
+  }
 </style>

src/components/table/index.js

@@ -49,6 +49,10 @@ export default {
       type: [Object, Boolean],
       default: null
     },
+    rowSelection: {
+      type: Object,
+      default: () => ({})
+    },
     /** @Deprecated */
     showAlertInfo: {
       type: Boolean,
@@ -97,7 +101,7 @@ export default {
     /**
      * 表格重新加载方法
      * 如果参数为 true, 则强制刷新到第一页
-     * @param Boolean bool 
+     * @param Boolean bool
      */
     refresh(bool = false) {
       this.loadData(bool ? { current: 1 }: {})
@@ -172,12 +176,13 @@ export default {
      */
     updateSelect (selectedRowKeys, selectedRows) {
       this.selectedRows = selectedRows
+      this.selectedRowKeys = selectedRowKeys
       const list = this.needTotalList
       this.needTotalList = list.map(item => {
         return {
           ...item,
           total: selectedRows.reduce((sum, val) => {
-            const total = sum + get(val, item.dataIndex)
+            const total = sum + parseInt(get(val, item.dataIndex))
             return isNaN(total) ? 0 : total
           }, 0)
         }
@@ -198,6 +203,7 @@ export default {
      * @returns {*}
      */
     renderClear (callback) {
+      if (this.selectedRowKeys.length <= 0) return null
       return (
         <a style="margin-left: 24px" onClick={() => {
           callback()
@@ -236,7 +242,7 @@ export default {
   render () {
     const props = {}
     const localKeys = Object.keys(this.$data)
-    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) || this.alert
+    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
 
     Object.keys(T.props).forEach(k => {
       const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
@@ -246,10 +252,11 @@ export default {
       if (showAlert && k === 'rowSelection') {
         // 重新绑定 rowSelection 事件
         return props[k] = {
-          selectedRowKeys: this[k].selectedRowKeys,
+          selectedRows: this.selectedRows,
+          selectedRowKeys: this.selectedRowKeys,
           onChange: (selectedRowKeys, selectedRows) => {
             this.updateSelect(selectedRowKeys, selectedRows)
-            this[k].onChange(selectedRowKeys, selectedRows)
+            typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
           }
         }
       }

src/utils/filter.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import moment from 'moment'
+import 'moment/locale/zh-cn'
+moment.locale('zh-cn')
 
 Vue.filter('NumberFormat', function (value) {
   if (!value) {

src/views/list/TableInnerEditList.vue

@@ -1,270 +1,267 @@
-<template>
-  <a-card :bordered="false">
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline">
-        <a-row :gutter="48">
-          <a-col :md="8" :sm="24">
-            <a-form-item label="规则编号">
-              <a-input placeholder=""/>
-            </a-form-item>
-          </a-col>
-          <a-col :md="8" :sm="24">
-            <a-form-item label="使用状态">
-              <a-select placeholder="请选择" default-value="0">
-                <a-select-option value="0">全部</a-select-option>
-                <a-select-option value="1">关闭</a-select-option>
-                <a-select-option value="2">运行中</a-select-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <template v-if="advanced">
-            <a-col :md="8" :sm="24">
-              <a-form-item label="调用次数">
-                <a-input-number style="width: 100%"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="更新日期">
-                <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="使用状态">
-                <a-select placeholder="请选择" default-value="0">
-                  <a-select-option value="0">全部</a-select-option>
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-            <a-col :md="8" :sm="24">
-              <a-form-item label="使用状态">
-                <a-select placeholder="请选择" default-value="0">
-                  <a-select-option value="0">全部</a-select-option>
-                  <a-select-option value="1">关闭</a-select-option>
-                  <a-select-option value="2">运行中</a-select-option>
-                </a-select>
-              </a-form-item>
-            </a-col>
-          </template>
-          <a-col :md="!advanced && 8 || 24" :sm="24">
-            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
-              <a-button type="primary">查询</a-button>
-              <a-button style="margin-left: 8px">重置</a-button>
-              <a @click="toggleAdvanced" style="margin-left: 8px">
-                {{ advanced ? '收起' : '展开' }}
-                <a-icon :type="advanced ? 'up' : 'down'"/>
-              </a>
-            </span>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-
-    <div class="table-operator">
-      <a-button type="primary" icon="plus" @click="() => $router.push({name: 'anime-add'})">新建</a-button>
-      <a-dropdown v-if="selectedRowKeys.length > 0">
-        <a-menu slot="overlay">
-          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
-          <!-- lock | unlock -->
-          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
-        </a-menu>
-        <a-button style="margin-left: 8px">
-          批量操作 <a-icon type="down" />
-        </a-button>
-      </a-dropdown>
-    </div>
-
-    <s-table
-      ref="table"
-      size="default"
-      :columns="columns"
-      :data="loadData"
-      :showAlertInfo="true"
-      @onSelect="onChange"
-    >
-      <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
-        <div :key="index">
-          <a-input
-            v-if="record.editable"
-            style="margin: -5px 0"
-            :value="text"
-            @change="e => handleChange(e.target.value, record.key, col)"
-          />
-          <template v-else>{{ text }}</template>
-        </div>
-      </template>
-      <template slot="action" slot-scope="text, record, index">
-        <div class="editable-row-operations">
-          <span v-if="record.editable">
-            <a @click="() => save(record)">保存</a>
-            <a-divider type="vertical" />
-            <a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
-              <a>取消</a>
-            </a-popconfirm>
-          </span>
-          <span v-else>
-            <a class="edit" @click="() => edit(record)">修改</a>
-            <a-divider type="vertical" />
-            <a class="delete" @click="() => del(record)">删除</a>
-          </span>
-        </div>
-      </template>
-    </s-table>
-
-  </a-card>
-</template>
-
-<script>
-  import STable from '@/components/table/'
-
-  export default {
-    name: 'TableList',
-    components: {
-      STable
-    },
-    data () {
-      return {
-        // 高级搜索 展开/关闭
-        advanced: false,
-        // 查询参数
-        queryParam: {},
-        // 表头
-        columns: [
-          {
-            title: '规则编号',
-            dataIndex: 'no',
-            width: 90
-          },
-          {
-            title: '描述',
-            dataIndex: 'description',
-            scopedSlots: { customRender: 'description' },
-          },
-          {
-            title: '服务调用次数',
-            dataIndex: 'callNo',
-            width: '150px',
-            sorter: true,
-            needTotal: true,
-            scopedSlots: { customRender: 'callNo' },
-            // customRender: (text) => text + ' 次'
-          },
-          {
-            title: '状态',
-            dataIndex: 'status',
-            width: '100px',
-            needTotal: true,
-            scopedSlots: { customRender: 'status' },
-          },
-          {
-            title: '更新时间',
-            dataIndex: 'updatedAt',
-            width: '150px',
-            sorter: true,
-            scopedSlots: { customRender: 'updatedAt' },
-          },
-          {
-            table: '操作',
-            dataIndex: 'action',
-            width: '120px',
-            scopedSlots: { customRender: 'action' },
-          }
-        ],
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          return this.$http.get('/service', {
-            params: Object.assign(parameter, this.queryParam)
-          }).then(res => {
-            return res.result
-          })
-        },
-
-        selectedRowKeys: [],
-        selectedRows: []
-      }
-    },
-    methods: {
-
-      handleChange (value, key, column) {
-        console.log(value, key, column)
-      },
-      edit (row) {
-        row.editable = true
-        // row = Object.assign({}, row)
-        this.$refs.table.updateEdit()
-      },
-      // eslint-disable-next-line
-      del (row) {
-        this.$confirm({
-          title: '警告',
-          content: '真的要删除吗?',
-          okText: '删除',
-          okType: 'danger',
-          cancelText: '取消',
-          onOk() {
-            console.log('OK')
-            // 在这里调用删除接口
-            return new Promise((resolve, reject) => {
-              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
-            }).catch(() => console.log('Oops errors!'))
-          },
-          onCancel() {
-            console.log('Cancel')
-          },
-        })
-      },
-      save (row) {
-        delete row.editable
-        this.$refs.table.updateEdit()
-      },
-      cancel (row) {
-        delete row.editable
-        this.$refs.table.updateEdit()
-      },
-
-      onChange (row) {
-        this.selectedRowKeys = row.selectedRowKeys
-        this.selectedRows = row.selectedRows
-      },
-      toggleAdvanced () {
-        this.advanced = !this.advanced
-      },
-    },
-    watch: {
-      /*
-      'selectedRows': function (selectedRows) {
-        this.needTotalList = this.needTotalList.map(item => {
-          return {
-            ...item,
-            total: selectedRows.reduce( (sum, val) => {
-              return sum + val[item.dataIndex]
-            }, 0)
-          }
-        })
-      }
-      */
-    }
-  }
-</script>
-
-<style lang="less" scoped>
-  .search {
-    margin-bottom: 54px;
-  }
-
-  .fold {
-    width: calc(100% - 216px);
-    display: inline-block
-  }
-
-  .operator {
-    margin-bottom: 18px;
-  }
-
-  @media screen and (max-width: 900px) {
-    .fold {
-      width: 100%;
-    }
-  }
+<template>
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="规则编号">
+              <a-input placeholder=""/>
+            </a-form-item>
+          </a-col>
+          <a-col :md="8" :sm="24">
+            <a-form-item label="使用状态">
+              <a-select placeholder="请选择" default-value="0">
+                <a-select-option value="0">全部</a-select-option>
+                <a-select-option value="1">关闭</a-select-option>
+                <a-select-option value="2">运行中</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <template v-if="advanced">
+            <a-col :md="8" :sm="24">
+              <a-form-item label="调用次数">
+                <a-input-number style="width: 100%"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="更新日期">
+                <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="8" :sm="24">
+              <a-form-item label="使用状态">
+                <a-select placeholder="请选择" default-value="0">
+                  <a-select-option value="0">全部</a-select-option>
+                  <a-select-option value="1">关闭</a-select-option>
+                  <a-select-option value="2">运行中</a-select-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :md="!advanced && 8 || 24" :sm="24">
+            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
+              <a-button type="primary">查询</a-button>
+              <a-button style="margin-left: 8px">重置</a-button>
+              <a @click="toggleAdvanced" style="margin-left: 8px">
+                {{ advanced ? '收起' : '展开' }}
+                <a-icon :type="advanced ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <div class="table-operator">
+      <a-button type="primary" icon="plus" @click="() => $router.push({name: 'anime-add'})">新建</a-button>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
+          <!-- lock | unlock -->
+          <a-menu-item key="2"><a-icon type="lock" />锁定</a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px">
+          批量操作 <a-icon type="down" />
+        </a-button>
+      </a-dropdown>
+    </div>
+
+    <s-table
+      ref="table"
+      size="default"
+      :columns="columns"
+      :data="loadData"
+      :alert="{ show: true, clear: true }"
+    >
+      <template v-for="(col, index) in columns" v-if="col.scopedSlots" :slot="col.dataIndex" slot-scope="text, record, index">
+        <div :key="index">
+          <a-input
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            @change="e => handleChange(e.target.value, record.key, col, record)"
+          />
+          <template v-else>{{ text }}</template>
+        </div>
+      </template>
+      <template slot="action" slot-scope="text, record, index">
+        <div class="editable-row-operations">
+          <span v-if="record.editable">
+            <a @click="() => save(record)">保存</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="真的放弃编辑吗?" @confirm="() => cancel(record)">
+              <a>取消</a>
+            </a-popconfirm>
+          </span>
+          <span v-else>
+            <a class="edit" @click="() => edit(record)">修改</a>
+            <a-divider type="vertical" />
+            <a class="delete" @click="() => del(record)">删除</a>
+          </span>
+        </div>
+      </template>
+    </s-table>
+
+  </a-card>
+</template>
+
+<script>
+  import STable from '@/components/table/'
+
+  export default {
+    name: 'TableList',
+    components: {
+      STable
+    },
+    data () {
+      return {
+        // 高级搜索 展开/关闭
+        advanced: false,
+        // 查询参数
+        queryParam: {},
+        // 表头
+        columns: [
+          {
+            title: '规则编号',
+            dataIndex: 'no',
+            width: 90
+          },
+          {
+            title: '描述',
+            dataIndex: 'description',
+            scopedSlots: { customRender: 'description' },
+          },
+          {
+            title: '服务调用次数',
+            dataIndex: 'callNo',
+            width: '150px',
+            sorter: true,
+            needTotal: true,
+            scopedSlots: { customRender: 'callNo' },
+            // customRender: (text) => text + ' 次'
+          },
+          {
+            title: '状态',
+            dataIndex: 'status',
+            width: '100px',
+            needTotal: true,
+            scopedSlots: { customRender: 'status' },
+          },
+          {
+            title: '更新时间',
+            dataIndex: 'updatedAt',
+            width: '200px',
+            sorter: true,
+            scopedSlots: { customRender: 'updatedAt' },
+          },
+          {
+            table: '操作',
+            dataIndex: 'action',
+            width: '120px',
+            scopedSlots: { customRender: 'action' },
+          }
+        ],
+        // 加载数据方法 必须为 Promise 对象
+        loadData: parameter => {
+          return this.$http.get('/service', {
+            params: Object.assign(parameter, this.queryParam)
+          }).then(res => {
+            return res.result
+          })
+        },
+
+        selectedRowKeys: [],
+        selectedRows: []
+      }
+    },
+    methods: {
+
+      handleChange (value, key, column, record) {
+        console.log(value, key, column)
+        record[column.dataIndex] = value
+      },
+      edit (row) {
+        row.editable = true
+        // row = Object.assign({}, row)
+      },
+      // eslint-disable-next-line
+      del (row) {
+        this.$confirm({
+          title: '警告',
+          content: `真的要删除 ${row.no} 吗?`,
+          okText: '删除',
+          okType: 'danger',
+          cancelText: '取消',
+          onOk() {
+            console.log('OK')
+            // 在这里调用删除接口
+            return new Promise((resolve, reject) => {
+              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
+            }).catch(() => console.log('Oops errors!'))
+          },
+          onCancel() {
+            console.log('Cancel')
+          },
+        })
+      },
+      save (row) {
+        row.editable = false
+      },
+      cancel (row) {
+        row.editable = false
+      },
+
+      onChange (row) {
+        this.selectedRowKeys = row.selectedRowKeys
+        this.selectedRows = row.selectedRows
+      },
+      toggleAdvanced () {
+        this.advanced = !this.advanced
+      },
+    },
+    watch: {
+      /*
+      'selectedRows': function (selectedRows) {
+        this.needTotalList = this.needTotalList.map(item => {
+          return {
+            ...item,
+            total: selectedRows.reduce( (sum, val) => {
+              return sum + val[item.dataIndex]
+            }, 0)
+          }
+        })
+      }
+      */
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
 </style>

src/views/list/TableList.vue

@@ -210,7 +210,7 @@
         mdl: {},
 
         // 高级搜索 展开/关闭
-        advanced: true,
+        advanced: false,
         // 查询参数
         queryParam: {},
         // 表头

src/views/list/TreeList.vue

@@ -2,7 +2,7 @@
   <a-card :bordered="false">
     <a-row :gutter="8">
       <a-col :span="5">
-        <s-tree :dataSource="orgTree" :search="true" @click="handleClick" @add="handleAdd" @titleClick="handleTitleClick"></s-tree>
+        <s-tree :dataSource="orgTree" :openKeys.sync="openKeys" :search="true" @click="handleClick" @add="handleAdd" @titleClick="handleTitleClick"></s-tree>
       </a-col>
       <a-col :span="19">
         <s-table
@@ -58,7 +58,7 @@ export default {
   },
   data () {
     return {
-      openKeys: ['sub1'],
+      openKeys: ['key-01'],
 
       // 查询参数
       queryParam: {},
@@ -102,7 +102,7 @@ export default {
           .then(res => {
             return res.result
           })
-          
+
       },
       orgTree: [],
       selectedRowKeys: [],