| | |
| | | <!-- eslint-disable vue/no-use-v-if-with-v-for --> |
| | | <template> |
| | | <div class="table-view"> |
| | | <el-table |
| | |
| | | :summary-method="getSummaries" |
| | | :span-method="arraySpanMethod" |
| | | @selection-change="handleSelectionChange" |
| | | :header-cell-style="{ background: '#f1f3f8', color: '#000009' , 'font-size': '12px','font-family':'PingFangSC'}" |
| | | :header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }" |
| | | size="mini" |
| | | > |
| | | <el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"></el-table-column> |
| | | <el-table-column v-if="selectBox" type="selection" width="40"> </el-table-column> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | |
| | | <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div> |
| | | <div class="styleBtn"> |
| | | <i @click="checkCol()" class="label">...</i> |
| | | <el-checkbox-group |
| | | v-model="showcol" |
| | | v-show="iscolopen" |
| | | class="checkbox-group" |
| | | @change="selectCheckBoxList" |
| | | > |
| | | <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item" |
| | | >{{ item }} |
| | | </el-checkbox> |
| | | <el-checkbox-group v-model="showcol" v-show="iscolopen" class="checkbox-group" @change="selectCheckBoxList"> |
| | | <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox> |
| | | </el-checkbox-group> |
| | | </div> |
| | | </div> |
| | |
| | | props: { |
| | | selectBox: { |
| | | type: Boolean, |
| | | default: true |
| | | default: false |
| | | }, |
| | | tableList: { |
| | | type: Object, |
| | | default: () => { |
| | | return { |
| | | selectBox: true, |
| | | selectIndex: true, |
| | | tableInfomation: [], // 接口返回数据 |
| | | showcol: [], |
| | | allcol: [], |
| | |
| | | data() { |
| | | return { |
| | | iscolopen: false, |
| | | showcol:[] |
| | | showcol: [] |
| | | } |
| | | }, |
| | | computed: {}, |
| | | watch: { |
| | | 'tableList.showcol':{ |
| | | handler(newVal){ |
| | | this.showcol=newVal |
| | | "tableList.showcol": { |
| | | handler(newVal) { |
| | | this.showcol = newVal |
| | | }, |
| | | immediate:true |
| | | immediate: true |
| | | } |
| | | }, |
| | | methods: { |
| | | onMaskClick() { |
| | | this.iscolopen = false; |
| | | this.iscolopen = false |
| | | }, |
| | | checkCol() { |
| | | this.iscolopen = !this.iscolopen; |
| | | this.iscolopen = !this.iscolopen |
| | | }, |
| | | selectCheckBoxList(val) { |
| | | this.$emit("selTableCol", val); |
| | | this.$emit("selTableCol", val) |
| | | }, |
| | | handleReserve(row) { |
| | | return row._id ? row._id : row.id |
| | |
| | | .querySelector(".el-table__footer") |
| | | var cell = current.rows[0].cells |
| | | for (let i = 0; i < this.showSummary.mergeNumber; i++) { |
| | | cell[i].style.display = "none" |
| | | cell[i] && cell[i].style && (cell[i].style.display = "none") |
| | | } |
| | | cell[this.showSummary.mergeNumber].classList.remove("is-left") |
| | | cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString() |
| | | if (cell[this.showSummary.mergeNumber]) { |
| | | if (cell[this.showSummary.mergeNumber].classList) { |
| | | cell[this.showSummary.mergeNumber].classList.remove("is-left") |
| | | } |
| | | if (cell[this.showSummary.mergeNumber].colSpan) { |
| | | cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString() |
| | | } |
| | | } |
| | | } |
| | | }) |
| | | } |
| | |
| | | text-align: center; |
| | | } |
| | | |
| | | ::v-deep{ |
| | | .el-table .cell .el-button--text.el-button--small{ |
| | | ::v-deep { |
| | | .el-table .cell .el-button--text.el-button--small { |
| | | padding: 4px 0; |
| | | } |
| | | } |
| | |
| | | // background: #06c062; |
| | | top: 0; |
| | | right: -6px; |
| | | z-index: 9999; |
| | | z-index: 11; |
| | | .label { |
| | | position: absolute; |
| | | top: 6px; |
| | |
| | | } |
| | | .checkbox-group { |
| | | width: 160px; |
| | | height: 330px; |
| | | height: 300px; |
| | | overflow: auto; |
| | | display: flex; |
| | | flex-direction: column; |