| | |
| | | <template> |
| | | <div> |
| | | <div class="box">
|
| | | <!-- elTable --> |
| | | <el-table v-loading="tableLoading" :data="tableData" :ref="tableRef" :size="tableSize" @row-click="rowClick" |
| | | @row-dblclick="rowDblClick" @selection-change="handleSelectionChange" border stripe> |
| | | <el-table v-loading="tableLoading" :data="tableData" :ref="tableRef" :size="tableSize" @row-click="handleRowClick"
|
| | | @row-dblclick="handleRowDblClick" @selection-change="handleSelectionChange" border stripe>
|
| | | <template v-for="(col, index) in tableColumns"> |
| | | <!-- 选择框 --> |
| | | <el-table-column v-if="col.selection" :key="`selection${index}`" width="50" type="selection" align="center"> |
| | |
| | | <el-table-column v-else-if="col.operation" :key="`operation${col.name}`" :width="col.width" :label="col.name" |
| | | align="center"> |
| | | <template #default="{ row }"> |
| | | <el-button v-for="subCol in col.value" :key="subCol.name" :class="subCol.class || ''" :icon="subCol.icon || ''" |
| | | v-permission="subCol.permission || ''" @click="subCol.handleRow ? subCol.handleRow(row) : emptyFn"> |
| | | <el-button v-for="subCol in col.value" :key="subCol.name" :class="subCol.class || ''"
|
| | | :icon="subCol.icon || ''" v-permission="subCol.permission || ''"
|
| | | @click="subCol.handleRow ? subCol.handleRow(row) : emptyFn">
|
| | | {{ subCol.name }} |
| | | </el-button> |
| | | </template> |
| | |
| | | </template> |
| | | </el-table> |
| | | <!-- 分页组件 --> |
| | | <cPagination :total="pageTotal" :page-num.sync="pageNum" :page-size.sync="pageSize" @change-page-num="changePageNum" |
| | | @change-page-size="changePageSize" /> |
| | | <cPagination v-if="pageTotal" :total="pageTotal" :page-num.sync="pageNum" :page-size.sync="pageSize"
|
| | | @change-page-num="changePageNum" @change-page-size="changePageSize" />
|
| | | </div> |
| | | </template> |
| | | <script> |
| | |
| | | handleSelection: { |
| | | type: Function, |
| | | default: () => { } |
| | | } |
| | | },
|
| | | rowClick: {
|
| | | type: Function,
|
| | | default: () => { }
|
| | | },
|
| | | }, |
| | | components: { |
| | | cPagination |
| | | }, |
| | | methods: { |
| | | changePageNum(val) { |
| | | // console.log(val) |
| | | // this.pageNum = val |
| | | this.$emit("update:pageNum", val); |
| | | this.pageChange(); |
| | | this.$emit("update:pageNum", val)
|
| | | this.pageChange()
|
| | | }, |
| | | changePageSize(val) { |
| | | this.$emit("update:pageSize", val); |
| | | this.$emit("update:pageSize", val)
|
| | | if (val * (this.pageNum - 1) <= this.pageTotal) { |
| | | this.pageChange(); |
| | | this.pageChange()
|
| | | } |
| | | }, |
| | | // 单击 |
| | | rowClick() { |
| | | // this.time && clearTimeout(this.time); |
| | | // this.time = setTimeout(() => { |
| | | // this.$refs[this.tableRef].toggleRowSelection(row); |
| | | // }, 200); |
| | | handleRowClick(row) {
|
| | | this.rowClick(row)
|
| | | }, |
| | | // 双击 |
| | | rowDblClick() { |
| | | // this.time && clearTimeout(this.time); |
| | | }, |
| | | clearSelection() { |
| | | this.$refs[this.tableRef].clearSelection(); |
| | | }, |
| | | handleRowDblClick() { },
|
| | | handleSelectionChange(val) { |
| | | this.handleSelection(val); |
| | | this.handleSelection(val)
|
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .box {
|
| | | height: 100%;
|
| | | }
|
| | |
|
| | | .el-table { |
| | | border: none; |
| | | height: 100%;
|
| | | } |
| | | </style> |