| | |
| | | <template> |
| | | <div class="standard"> |
| | | <div> |
| | | <el-table :data="tableData" max-height="675" style="width: 100%;margin-bottom: 20px;" row-key="rowId" border |
| | | <el-table :data="tableData" max-height="675" row-key="rowId" border |
| | | @select-all="selectAll" @select="selectTr" ref="multipleTable" |
| | | @selection-change="handleSelectionChange" default-expand-all |
| | | :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"> |
| | | <el-table-column type="selection" width="55"> |
| | | </el-table-column> |
| | | <el-table-column type="index" width="50" label="序号"> |
| | | <el-table-column type="index" width="60" label="序号"> |
| | | </el-table-column> |
| | | <el-table-column prop="father" label="工序" sortable width="200px"> |
| | | <template slot-scope="scope"> |
| | |
| | | <el-table-column prop="tname" sortable label="工艺名称"> |
| | | <template slot-scope="scope"> |
| | | <el-tag type="success" v-if="scope.row.tname != null">02</el-tag> |
| | | <span style="color: black"> |
| | | <span style="color: #000000"> |
| | | {{ scope.row.tname }} |
| | | </span> |
| | | </template> |
| | |
| | | } |
| | | }, |
| | | props:['tableData','tableType'], |
| | | created() { |
| | | console.log(this.tableData,this.tableType) |
| | | }, |
| | | mounted() { |
| | | |
| | | }, |
| | | created() {}, |
| | | mounted() {}, |
| | | methods: { |
| | | handleSelectionChange(val) { |
| | | this.selects = val; |
| | | // 表格树全部选中配置 |
| | | // 全选/取消选操作 |
| | | selectAll(val) { |
| | | this.isAllSelect = !this.isAllSelect; |
| | | let data = this.tableData; |
| | | this.toggleSelect(data, this.isAllSelect, "all"); |
| | | }, |
| | | //选择某行 |
| | | selectTr(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") { |
| | | 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); |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.deleteList = []; |
| | | val.forEach((v) => { |
| | | if (v.id !== undefined) { |
| | | this.deleteList.push(v.id); |
| | | } |
| | | }); |
| | | }, |
| | | // 表格树全部选中配置 结束 |
| | | } |
| | | } |
| | | </script> |