| | |
|---|
| | | @select="userSelect" |
|---|
| | | @select-all="userSelect" |
|---|
| | | @selection-change="selectionChange" |
|---|
| | | @expand-change="expandChange" |
|---|
| | | @row-dblclick="rowDbClick" |
|---|
| | | @row-click="rowClick" |
|---|
| | | @header-click="headerClick" |
|---|
| | |
|---|
| | | style="width: 100%" |
|---|
| | | :scrollbar-always-on="true" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | v-if="showExpand" |
|---|
| | | type="expand" |
|---|
| | | :fixed="expand.fixed" |
|---|
| | | :width="expand.width || 55" |
|---|
| | | > |
|---|
| | | <template #default="scope"> |
|---|
| | | <div class="expand-cell"> |
|---|
| | | <table-render |
|---|
| | | v-if="expand.render && typeof expand.render == 'function'" |
|---|
| | | :row="scope.row" |
|---|
| | | :index="scope.$index" |
|---|
| | | :column="expand" |
|---|
| | | :render="expand.render" |
|---|
| | | ></table-render> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | v-if="ck" |
|---|
| | | type="selection" |
|---|
| | |
|---|
| | | import VolTableRender from "./VolTable/VolTableRender"; |
|---|
| | | let _errMsg; |
|---|
| | | import { defineComponent, defineAsyncComponent } from "vue"; |
|---|
| | | |
|---|
| | | const tableErrorImg = new URL("../../assets/imgs/error.png", import.meta.url) |
|---|
| | | .href; |
|---|
| | | |
|---|
| | | export default defineComponent({ |
|---|
| | | //https://github.com/element-plus/element-plus/issues/1483 |
|---|
| | | //没有原先的selection属性了，看issue上使用select/selectall获取 |
|---|
| | |
|---|
| | | type: Function, |
|---|
| | | default: function () { |
|---|
| | | return 1; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | expand: { |
|---|
| | | type: Object, |
|---|
| | | default: () => { |
|---|
| | | return {}; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | pagination: { |
|---|
| | |
|---|
| | | realMaxHeight: 0, |
|---|
| | | enableEdit: false, // 是否启表格用编辑功能 |
|---|
| | | empty: this.allowEmpty ? "" : "--", |
|---|
| | | defaultImg: 'this.src="' + require("@/assets/imgs/error.png") + '"', |
|---|
| | | defaultImg: `this.src="${tableErrorImg}"`, |
|---|
| | | loading: false, |
|---|
| | | footer: {}, |
|---|
| | | total: 0, |
|---|
| | |
|---|
| | | this.defaultLoadPage && this.load(); |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | showExpand() { |
|---|
| | | return !!(this.expand && typeof this.expand.render === "function"); |
|---|
| | | }, |
|---|
| | | filterColumns() { |
|---|
| | | return this.columns.filter((x, index) => { |
|---|
| | | if (!x.field) { |
|---|
| | |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | expandChange(row, expandedRows) { |
|---|
| | | if (this.expand && typeof this.expand.onChange === "function") { |
|---|
| | | this.expand.onChange(row, expandedRows, this); |
|---|
| | | } |
|---|
| | | this.$emit("expandChange", { row, expandedRows }); |
|---|
| | | }, |
|---|
| | | watchRowSelectChange(newLen, oldLen) { |
|---|
| | | if (newLen < oldLen && this.selectRows.length) { |
|---|
| | | this.selectRows = []; |
|---|
| | |
|---|
| | | border-bottom: 1px solid; |
|---|
| | | padding-bottom: 2px; |
|---|
| | | } |
|---|
| | | .vol-table .expand-cell { |
|---|
| | | padding: 8px 0; |
|---|
| | | } |
|---|
| | | .vol-table .empty-tag { |
|---|
| | | border: none; |
|---|
| | | background: none; |
|---|
