Răsfoiți Sursa

table组件升级,更多事件按钮事件添加,筛选排序列功能添加(未完成)

asd26269546 2 ani în urmă
părinte
comite
b873209877

+ 2 - 0
src/components/by-table/by-table.scss

@@ -37,6 +37,8 @@
     }
     .more-icon{
         cursor: pointer;
+        width: 40px;
+        text-align: center;
     }
     .more-icon:hover{
         i{

+ 45 - 5
src/components/by-table/index.js

@@ -2,7 +2,8 @@ import './by-table.scss'
 export default {
     data() {
         return {
-
+            sortFilterModal:false,
+            checkboxValue:[],
         }
     },
     props: {
@@ -47,7 +48,10 @@ export default {
                 }
 
             }
-        }
+        },
+        searchMoreFn:{
+            type:Function
+        },
 
     },
     methods: {
@@ -85,7 +89,6 @@ export default {
                     {
                         this.columns.map(item => {
                             if (item.actions) {
-                                console.log(item.actions)
                                 return this.renderActionColumn(h, item)
                             } else if (item.render) {
                                 return <el-table-column
@@ -172,7 +175,9 @@ export default {
                             return this.renderDropDown(h, item)
                         })
                     }
-                    <div class='more-text'>更多 <i class="el-icon-arrow-right el-icon--right"></i></div>
+                    <div class='more-text' onClick={
+                        () => this.searchMoreFn ? this.searchMoreFn() : console.log('请配置searchMoreFn方法')
+                    }>更多 <i class="el-icon-arrow-right"></i></div>
                 </div>
                 <div style='display: flex;'>
                     <el-input
@@ -181,7 +186,12 @@ export default {
                         size="mini"
                         value={this.req.keyword} onInput={$event => this.req.keyword = $event}>
                     </el-input>
-                    <div class='more-icon'><i class="el-icon-arrow-right el-icon--right"></i></div>
+                    <div class='more-icon' onClick={
+                        () => this.searchMoreFn ? this.searchMoreFn() : console.log('请配置searchMoreFn方法')
+                    }><i class="el-icon-wind-power"></i></div>
+                    <div  class='more-icon'>
+                        <i onClick={() =>this.openSortFilterModal()} class="el-icon-notebook-2"></i>
+                    </div>
                 </div>
             </div>
         },
@@ -191,6 +201,34 @@ export default {
                 console.log(item.labelCopy)
             })
         },
+        openSortFilterModal(){
+            const v = this
+            v.sortFilterModal = true
+            console.log(v.sortFilterModal)
+        },
+        renderFilter(h){
+            const v = this
+            return <el-dialog
+                title="设置筛选列"
+                visible={v.sortFilterModal}
+                width="30%"
+            >
+                <el-checkbox-group v-model={this.checkboxValue} >
+                    {
+                        v.columns.map(items => {
+                            return <el-checkbox label={items.label}></el-checkbox>
+                        })
+                    }
+                </el-checkbox-group>
+                <span slot="footer" class="dialog-footer">
+                    <el-button onClick={()=> v.sortFilterModal = false}>取 消</el-button>
+                    <el-button type="primary" onClick={()=> v.sortFilterSubmit()}>确 定</el-button>
+                </span>
+            </el-dialog>
+        },
+        sortFilterSubmit(){
+            console.log(this.checkboxValue)
+        },
     },
     created() {
         this.renderSearchInit()
@@ -201,10 +239,12 @@ export default {
         const search = this.renderSearch(h)
         const table = this.renderTable(h)
         const page = this.renderPage(h)
+        const filter = this.renderFilter(h)
         return <div class='by-table'>
             {search}
             {table}
             {page}
+            {filter}
         </div>
     },
 }

+ 4 - 0
src/views/management/video-setting/index.vue

@@ -64,6 +64,7 @@
             :pageNum.sync="req.pageNum"
             :pageSize.sync="req.pageSize"
             :selectConfig="selectConfig"
+            :searchMoreFn="openSearchModal"
             :req="req"
             :total="total"
           >
@@ -307,6 +308,9 @@ export default {
   },
   watch: {},
   methods: {
+    openSearchModal(){
+      alert('点击更多,用来打开搜索模态框')
+    },
     toView(e) {
       console.log(e);
       const v = this;