Showing
1 changed file
with
45 additions
and
21 deletions
| ... | @@ -6,11 +6,11 @@ | ... | @@ -6,11 +6,11 @@ |
| 6 | :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="loading" | 6 | :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="loading" |
| 7 | :cell-class-name="cellClassName" :header-cell-class-name="headerCellClassName" @sort-change="sortChange" | 7 | :cell-class-name="cellClassName" :header-cell-class-name="headerCellClassName" @sort-change="sortChange" |
| 8 | @select="tableSelect" @select-all="tableSelectAll" @select-change="SelectChange"> | 8 | @select="tableSelect" @select-all="tableSelectAll" @select-change="SelectChange"> |
| 9 | - <!-- 复选框 --> | 9 | + <!-- 多选框 --> |
| 10 | - <el-table-column v-if="selection" type="selection" :fixed="true" width="50" align="center"></el-table-column> | 10 | + <el-table-column v-if="selection" type="selection" width="50" align="center"></el-table-column> |
| 11 | <!-- 序号 --> | 11 | <!-- 序号 --> |
| 12 | - <el-table-column type="index" width="50" align="center"></el-table-column> | 12 | + <el-table-column type="index" width="50" align="center" :index="indexAdd"></el-table-column> |
| 13 | - <template v-for="(item, index) in newHeader"> | 13 | + <template v-for="(item, index) in headerData"> |
| 14 | <!-- 自定义插槽 --> | 14 | <!-- 自定义插槽 --> |
| 15 | <el-table-column v-if="item.slot" :prop="item.value" :label="item.name" :width="item.width" :align="item.align" | 15 | <el-table-column v-if="item.slot" :prop="item.value" :label="item.name" :width="item.width" :align="item.align" |
| 16 | :fixed="item.fixed" :show-overflow-tooltip="showOverflowTooltip" :sortable="item.sorTable" | 16 | :fixed="item.fixed" :show-overflow-tooltip="showOverflowTooltip" :sortable="item.sorTable" |
| ... | @@ -28,10 +28,8 @@ | ... | @@ -28,10 +28,8 @@ |
| 28 | :formatter="formatter" :key="index"> | 28 | :formatter="formatter" :key="index"> |
| 29 | </el-table-column> | 29 | </el-table-column> |
| 30 | </template> | 30 | </template> |
| 31 | - <!-- 末端插槽 --> | ||
| 32 | <slot name="optionColumn"></slot> | 31 | <slot name="optionColumn"></slot> |
| 33 | </el-table> | 32 | </el-table> |
| 34 | - <!-- 分页 --> | ||
| 35 | <el-pagination :total="totalCount" :page-size.sync="limitSize" :current-page.sync="pageNum" :page-sizes="pageSizes" | 33 | <el-pagination :total="totalCount" :page-size.sync="limitSize" :current-page.sync="pageNum" :page-sizes="pageSizes" |
| 36 | background layout="prev, pager, next, jumper, ->, sizes, total" class="tablePagination" @size-change="sizeChange" | 34 | background layout="prev, pager, next, jumper, ->, sizes, total" class="tablePagination" @size-change="sizeChange" |
| 37 | @next-click="nextClick" @prev-click="prevClick" @current-change="currentChange"> | 35 | @next-click="nextClick" @prev-click="prevClick" @current-change="currentChange"> |
| ... | @@ -47,8 +45,11 @@ export default { | ... | @@ -47,8 +45,11 @@ export default { |
| 47 | props: { | 45 | props: { |
| 48 | //dom名称 | 46 | //dom名称 |
| 49 | tableName: { type: String, default: "tables" }, | 47 | tableName: { type: String, default: "tables" }, |
| 48 | + ductName: { | ||
| 49 | + type: String, | ||
| 50 | + default: '' | ||
| 51 | + }, | ||
| 50 | //表格数据 | 52 | //表格数据 |
| 51 | - ductName: { type: String, default: null }, | ||
| 52 | data: { | 53 | data: { |
| 53 | type: Array, | 54 | type: Array, |
| 54 | default() { | 55 | default() { |
| ... | @@ -165,9 +166,7 @@ export default { | ... | @@ -165,9 +166,7 @@ export default { |
| 165 | inheritAttrs: false, | 166 | inheritAttrs: false, |
| 166 | data() { | 167 | data() { |
| 167 | return { | 168 | return { |
| 168 | - newHeader: this.headerData, | ||
| 169 | selectTable: [], | 169 | selectTable: [], |
| 170 | - checkDisabled: [], | ||
| 171 | pageNum: 1, | 170 | pageNum: 1, |
| 172 | start: -1, | 171 | start: -1, |
| 173 | show: false, | 172 | show: false, |
| ... | @@ -189,29 +188,22 @@ export default { | ... | @@ -189,29 +188,22 @@ export default { |
| 189 | // }, | 188 | // }, |
| 190 | }; | 189 | }; |
| 191 | }, | 190 | }, |
| 192 | - created() { | ||
| 193 | - this.newHeader.map((item) => { | ||
| 194 | - this.checkDisabled.push(item.name); | ||
| 195 | - }); | ||
| 196 | - }, | ||
| 197 | watch: { | 191 | watch: { |
| 198 | page() { | 192 | page() { |
| 199 | this.pageNum = this.page; | 193 | this.pageNum = this.page; |
| 200 | }, | 194 | }, |
| 201 | data() { | 195 | data() { |
| 202 | - this.data.forEach((item, index) => { | 196 | + if (this.selection) { |
| 203 | - item.index = index; | 197 | + this.data.forEach((item, index) => { |
| 204 | - }); | 198 | + item.index = index; |
| 199 | + }); | ||
| 200 | + } | ||
| 205 | this.$nextTick(() => { | 201 | this.$nextTick(() => { |
| 206 | this.$refs.tables.doLayout(); | 202 | this.$refs.tables.doLayout(); |
| 207 | }); | 203 | }); |
| 208 | }, | 204 | }, |
| 209 | - headerData(val, oldVal) { | ||
| 210 | - this.newHeader = val; | ||
| 211 | - }, | ||
| 212 | }, | 205 | }, |
| 213 | methods: { | 206 | methods: { |
| 214 | - //数据长度切换 | ||
| 215 | sizeChange(val) { | 207 | sizeChange(val) { |
| 216 | this.$emit("sizeChange", val); | 208 | this.$emit("sizeChange", val); |
| 217 | }, | 209 | }, |
| ... | @@ -239,6 +231,12 @@ export default { | ... | @@ -239,6 +231,12 @@ export default { |
| 239 | }); | 231 | }); |
| 240 | scrollTo(0, 800); | 232 | scrollTo(0, 800); |
| 241 | }, | 233 | }, |
| 234 | + //连续序号 | ||
| 235 | + indexAdd(index) { | ||
| 236 | + const page = this.pageNum // 当前页码 | ||
| 237 | + const pagesize = this.limitSize // 每页条数 | ||
| 238 | + return index + 1 + (page - 1) * pagesize | ||
| 239 | + }, | ||
| 242 | //表格多选,shift连续选择 | 240 | //表格多选,shift连续选择 |
| 243 | tableSelect(selection, row) { | 241 | tableSelect(selection, row) { |
| 244 | let end = row.index; | 242 | let end = row.index; |
| ... | @@ -343,6 +341,7 @@ export default { | ... | @@ -343,6 +341,7 @@ export default { |
| 343 | let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ""; | 341 | let start = columnIndex - 1 === this.dragState.start ? `darg_start` : ""; |
| 344 | return `${active} ${start}`; | 342 | return `${active} ${start}`; |
| 345 | }, | 343 | }, |
| 344 | + | ||
| 346 | cellClassName({ column, columnIndex }) { | 345 | cellClassName({ column, columnIndex }) { |
| 347 | return columnIndex - 1 === this.dragState.start ? `darg_start` : ""; | 346 | return columnIndex - 1 === this.dragState.start ? `darg_start` : ""; |
| 348 | }, | 347 | }, |
| ... | @@ -380,6 +379,31 @@ export default { | ... | @@ -380,6 +379,31 @@ export default { |
| 380 | 379 | ||
| 381 | .el-table th { | 380 | .el-table th { |
| 382 | padding: 0; | 381 | padding: 0; |
| 382 | + | ||
| 383 | + .virtual { | ||
| 384 | + position: absolute; | ||
| 385 | + display: block; | ||
| 386 | + width: 0; | ||
| 387 | + height: 0; | ||
| 388 | + top: 0px; | ||
| 389 | + left: 0px; | ||
| 390 | + background: none; | ||
| 391 | + border: none; | ||
| 392 | + } | ||
| 393 | + | ||
| 394 | + &.darg_active_left { | ||
| 395 | + .virtual { | ||
| 396 | + border-left: 2px dotted #666; | ||
| 397 | + z-index: 99; | ||
| 398 | + } | ||
| 399 | + } | ||
| 400 | + | ||
| 401 | + &.darg_active_right { | ||
| 402 | + .virtual { | ||
| 403 | + border-right: 2px dotted #666; | ||
| 404 | + z-index: 99; | ||
| 405 | + } | ||
| 406 | + } | ||
| 383 | } | 407 | } |
| 384 | 408 | ||
| 385 | .thead-cell { | 409 | .thead-cell { | ... | ... |
-
Please register or login to post a comment