選項功能組合操作 · 武功秘籍大全

![](https://img.kancloud.cn/55/62/5562346126218b8486526c5b582a3b99_1806x498.gif) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <title>demo</title> <link href="https://cdn.staticfile.org/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.staticfile.org/element-ui/2.12.0/index.js"></script> <style> body { background: #D5D5D5; } ul { list-style: none; } </style> </head> <body> <div id="app"> <div style="display: flex"> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>狀態</span> </div> <template> <el-table :data="stateOptions" stripe size="mini" style="width: 100%"> <el-table-column prop="index" label="索引" width="50"> </el-table-column> <el-table-column prop="name" label="名稱" width="100"> </el-table-column> <el-table-column label="擁有功能" width="400" > <template slot-scope="scope">  <template v-for="item in scope.row.funcOpts"> {{item}}--{{functionOptions[item]}}, </template> </template> </el-table-column> </el-table> </template> </el-card> <div style="margin: 10px"></div> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>功能</span> </div> <template> <ul> <li v-for="(item,index) in functionOptions">{{index}}--{{item}}</li> </ul> </template> </el-card> <div style="margin: 10px"></div> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>示例操作</span> </div> <template> <el-checkbox-group v-model="checkList" @change="showCheck"> <el-checkbox v-for="(item,index) in stateOptions" :key="index" :label="item.index">{{item.name}} </el-checkbox> </el-checkbox-group> </template> <el-divider>組合后的功能</el-divider> <div> <span :key="index" v-for="(item,index) in lists">{{item}}--{{functionOptions[item]}}，</span> </div> </el-card> </div> </div> <script> var app = new Vue({ el: '#app', data: { stateOptions: [ { index: '0', name: '待解析', funcOpts: [4, 5, 7] }, { index: '1', name: '打開中', funcOpts: [4, 5] }, { index: '2', name: '解析中', funcOpts: [4, 5] }, { index: '3', name: '解析成功', funcOpts: [0, 1, 2, 3] }, { index: '4', name: '解析警告', funcOpts: [0, 1, 2, 3] }, { index: '5', name: '解析錯誤', funcOpts: [2, 3] }, { index: '6', name: '解析暫停', funcOpts: [4, 6, 7] }, { index: '7', name: '解析取消', funcOpts: [2, 3] } ], functionOptions: [ '參數設置', //0 '提交渲染',//1 '重渲解析',//2 '刪除任務',//3 '取消解析',//4 '暫停解析',//5 '繼續解析',//6 '優先級調整',//7 ], checkList: [], lists: [] }, methods: { showCheck() { if (this.checkList.length == 0) { this.lists = []; //無選擇,lists恢復原樣 return; } for (let i = 0; i < this.checkList.length; i++) { let index = this.checkList[i]; this.stateOptions.forEach(obj => { if (obj.index == index) { if (i == 0) { this.lists = JSON.parse(JSON.stringify(obj.funcOpts)); } else { //取交集 this.lists = this.lists.filter(v => obj.funcOpts.includes(v)); } } }); } if (this.checkList.length > 1) { //過濾0,7 let index0 = this.lists.indexOf(0); if (index0 > -1) { this.lists.splice(index0, 1); } let index7 = this.lists.indexOf(7); if (index7 > -1) { this.lists.splice(index7, 1); } } } } }); </script> </body> </html> ~~~