Explorar o código

添加搜素,未完成

wolyshaw %!s(int64=4) %!d(string=hai) anos
pai
achega
d3e49bf74c
Modificáronse 1 ficheiros con 26 adicións e 5 borrados
  1. 26 5
      src/views/setSilder/addSilder.vue

+ 26 - 5
src/views/setSilder/addSilder.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="slider-container">
-    <el-button @click='onOperation("create")'
-               style="position: fixed; z-index: 100;">添加按钮</el-button>
+    <div style="position: fixed; z-index: 100; top: 100px;left: 185px;right: 30px">
+      <el-input placeholder="请输入关键词" v-model="keyword" clearable>
+        <el-button
+          @click='onOperation("create")'
+          slot="append"
+        >添加按钮</el-button>
+      </el-input>
+    </div>
 
-    <el-table :data="tableList"
-              style="width: 100%;margin-bottom: 20px;"
+    <el-table :data="tableListFilter"
+              style="width: 100%;margin-bottom: 20px;margin-top: 40px;"
               row-key="id"
               border
               :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
@@ -158,10 +164,13 @@
 </template>
 <script>
 import { addSilder, getSilder, deleteSilder, resetSilder } from '@/api/silder'
+import { debounce } from 'lodash'
 export default {
   name: 'addSilder',
   data () {
     return {
+      keyword: '',
+      tableListFilter: [],
       tableList: [], // 数据列表
       cascaderList: [], // 父级元素
       formLabelWidth: '100px',
@@ -210,6 +219,18 @@ export default {
         ]
       }
      */
+    filterList(list, key) {
+      return list.filter(item => {
+        const isVisible = (
+          (item.name || '').indexOf(key) > -1 ||
+          (item.memo || '').indexOf(key) > -1 ||
+          (item.memo || '').indexOf(key) > -1 ||
+          (item.permission || '').indexOf(key) > -1
+        )
+        const child = this.filterList(item.children || [], key)
+        return isVisible || child.length
+      })
+    },
     onOperation (type, row) {
       this.branchStatus = true
       this.operationType = type
@@ -350,4 +371,4 @@ export default {
     margin-top: 20px;
   }
 }
-</style>
+</style>