| | |
| | | <!-- eslint-disable vue/no-use-v-if-with-v-for --> |
| | | <template> |
| | | <div class="table-view"> |
| | | <el-table |
| | |
| | | :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: [], |
| | |
| | | }, |
| | | computed: {}, |
| | | watch: { |
| | | 'tableList.showcol':{ |
| | | "tableList.showcol": { |
| | | handler(newVal){ |
| | | this.showcol=newVal |
| | | }, |
| | |
| | | }, |
| | | 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 |
| | |
| | | margin-left: -10px; |
| | | margin-right: -11px; |
| | | li { |
| | | //height: 57px; |
| | | //line-height: 57px; |
| | | height: 57px; |
| | | line-height: 57px; |
| | | .name-view { |
| | | padding-left: 10px; |
| | | border-bottom: 1px solid #ebeef5; |
| | |
| | | } |
| | | } |
| | | .no-product { |
| | | //height: 57px; |
| | | //line-height: 57px; |
| | | } |
| | | li:last-child .name-view{ |
| | | border-bottom: none; |
| | | height: 57px; |
| | | line-height: 57px; |
| | | } |
| | | } |
| | | |
| | | } |
| | | ::v-deep { |
| | | .el-table__footer-wrapper { |
| | |
| | | } |
| | | .checkbox-group { |
| | | width: 160px; |
| | | height: 330px; |
| | | height: 300px; |
| | | overflow: auto; |
| | | display: flex; |
| | | flex-direction: column; |