| | |
| | | <div class="right"> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%;margin-bottom: 20px;" |
| | | row-key="name" |
| | | style="width: 100%;margin-bottom: 20px;height: 600px;overflow: auto;" |
| | | row-key="rowId" |
| | | border |
| | | @select="selectTr" |
| | | @selection-change="handleSelectionChange" |
| | | default-expand-all |
| | | ref="multipleTable" |
| | | :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> |
| | | <el-table-column |
| | | type="selection" |
| | |
| | | width="200px"> |
| | | <template slot-scope="scope" style="text-align: center;"> |
| | | <div v-if="!scope.row.children"> |
| | | <el-button type="text" size="mini" @click="childrenClick(scope.row)">编辑</el-button> |
| | | <!-- <el-button type="text" size="mini" @click="childrenClick(scope.row)">编辑</el-button> --> |
| | | <el-button type="text" size="mini" @click="deleteRow(scope.$index, scope.row)">删除</el-button> |
| | | </div> |
| | | </template> |
| | |
| | | }).then(res => { |
| | | this.tableData = res.data; |
| | | console.log(this.tableData); |
| | | |
| | | this.formatData(res.data) |
| | | }) |
| | | }, |
| | | modify(){ |
| | | this.modifyevent = true |
| | | }, |
| | | formatData(data){ |
| | | let arr = data; |
| | | for(var i=0;i<arr.length;i++){ |
| | | arr[i].rowId = Math.random(); |
| | | if(arr[i].children != undefined){ |
| | | this.formatData(arr[i].children); |
| | | } |
| | | } |
| | | }, |
| | | //delQueById |
| | | delQueById() { |
| | | this.$axios.post(this.$api.url.delQueById,{ |
| | |
| | | this.upData.id = row.id |
| | | console.log(this.upData.id); |
| | | this.delQueById() |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.selects = val |
| | | }, |
| | | //批量删除 |
| | | delAllQue() { |
| | |
| | | let cc = this.selects.map(el => { |
| | | return el.id |
| | | }) |
| | | // cc.forEach((el,idx) =>{ |
| | | // delete idx[0] |
| | | // }) |
| | | cc.splice(0,1) |
| | | console.log(cc); |
| | | this.delete = cc.join(',') |
| | | console.log(this.delete); |
| | | this.delAllQue() |
| | |
| | | // // filterNode(){ |
| | | |
| | | // }, |
| | | handleSelectionChange(val) { |
| | | this.selects = val |
| | | this.deleteList = []; |
| | | val.forEach((v) => { |
| | | if (v.id !== undefined) { |
| | | this.deleteList.push(v.id); |
| | | } |
| | | }); |
| | | }, |
| | | // 表格树全部选中配置 |
| | | // 全选/取消选操作 |
| | | selectAll(val) { |
| | | this.isAllSelect = !this.isAllSelect; |
| | | let data = this.tableData; |
| | | this.toggleSelect(data, this.isAllSelect, "all"); |
| | | }, |
| | | //选择某行 |
| | | selectTr(selection, row) { |
| | | console.log(selection,row); |
| | | this.$set(row, "isChecked", !row.isChecked); |
| | | this.$nextTick(() => { |
| | | this.isAllSelect = row.isChecked; |
| | | this.toggleSelect(row, row.isChecked, "tr"); |
| | | }); |
| | | |
| | | }, |
| | | //递归子级 |
| | | toggleSelect(data, flag, type) { |
| | | if (type === "all") { |
| | | console.log('222'); |
| | | if (data.length > 0) { |
| | | data.forEach((item) => { |
| | | this.toggleSelection(item, flag); |
| | | if (item.children && item.children.length > 0) { |
| | | this.toggleSelect(item.children, flag, type); |
| | | } |
| | | }); |
| | | } |
| | | } else { |
| | | if (data.children && data.children.length > 0) { |
| | | data.children.forEach((item) => { |
| | | item.isChecked = !item.isChecked; |
| | | this.$refs.multipleTable.toggleRowSelection(item, flag); |
| | | this.toggleSelect(item, flag, type); |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | |
| | | } |
| | | } |