| | |
| | | <template> |
| | | <!-- 2021.11.18ç§»é¤voltableæ¹æ³@cell-mouse-leave="rowEndEdit" --> |
| | | <div |
| | | class="vol-table" |
| | | :class="[ |
| | | textInline ? 'text-inline' : '', |
| | | fxRight ? 'fx-right' : '', |
| | | isChrome ? 'chrome' : '', |
| | | smallCell ? 'small-table' : '' |
| | | ]" |
| | | > |
| | | <div class="vol-table" :class="[ |
| | | textInline ? 'text-inline' : '', |
| | | fxRight ? 'fx-right' : '', |
| | | isChrome ? 'chrome' : '', |
| | | smallCell ? 'small-table' : '' |
| | | ]"> |
| | | <div class="mask" v-show="loading"></div> |
| | | <div class="message" v-show="loading">å è½½ä¸.....</div> |
| | | <el-table |
| | | :show-summary="summary" |
| | | :summary-method="getSummaryData" |
| | | :row-key="rowKey" |
| | | :key="randomTableKey" |
| | | :lazy="lazy" |
| | | :defaultExpandAll="defaultExpandAll" |
| | | :expand-row-keys="rowKey ? expandRowKeys : undefined" |
| | | stripe |
| | | :load="loadTreeChildren" |
| | | @select="userSelect" |
| | | @select-all="userSelect" |
| | | @selection-change="selectionChange" |
| | | @row-dblclick="rowDbClick" |
| | | @row-click="rowClick" |
| | | @header-click="headerClick" |
| | | :highlight-current-row="highlightCurrentRow" |
| | | ref="table" |
| | | class="v-table" |
| | | @sort-change="sortChange" |
| | | tooltip-effect="dark" |
| | | :height="realHeight" |
| | | :max-height="realMaxHeight" |
| | | :data="url ? rowData : tableData" |
| | | border |
| | | :row-class-name="initIndex" |
| | | :cell-style="getCellStyle" |
| | | style="width: 100%" |
| | | :scrollbar-always-on="true" |
| | | :span-method="cellSpanMethod" |
| | | @expand-change="expandChange" |
| | | > |
| | | <el-table :show-summary="summary" :summary-method="getSummaryData" :row-key="rowKey" :key="randomTableKey" |
| | | :lazy="lazy" :defaultExpandAll="defaultExpandAll" :expand-row-keys="rowKey ? expandRowKeys : undefined" stripe |
| | | :load="loadTreeChildren" @select="userSelect" @select-all="userSelect" @selection-change="selectionChange" |
| | | @row-dblclick="rowDbClick" @row-click="rowClick" @header-click="headerClick" |
| | | :highlight-current-row="highlightCurrentRow" ref="table" class="v-table" @sort-change="sortChange" |
| | | tooltip-effect="dark" :height="realHeight" :max-height="realMaxHeight" :data="url ? rowData : tableData" border |
| | | :row-class-name="initIndex" :cell-style="getCellStyle" style="width: 100%" :scrollbar-always-on="true" |
| | | :span-method="cellSpanMethod" @expand-change="expandChange"> |
| | | <el-table-column v-if="columnIndex" type="index" :fixed="fixed" width="55"></el-table-column> |
| | | <el-table-column |
| | | v-if="ck" |
| | | type="selection" |
| | | :fixed="fixed" |
| | | :selectable="selectable" |
| | | width="55" |
| | | ></el-table-column> |
| | | <el-table-column v-if="ck" type="selection" :fixed="fixed" :selectable="selectable" width="55"></el-table-column> |
| | | |
| | | <!-- 2020.10.10ç§»é¤table第ä¸è¡å¼ºå¶æåº --> |
| | | <el-table-column |
| | | v-for="(column, cindex) in filterColumns" |
| | | :prop="column.field" |
| | | :label="column.title" |
| | | :min-width="column.width" |
| | | :formatter="formatter" |
| | | :fixed="column.fixed" |
| | | :key="column.field + cindex" |
| | | :align="column.align" |
| | | :sortable="column.sort ? 'custom' : false" |
| | | :show-overflow-tooltip="true" |
| | | > |
| | | <el-table-column v-for="(column, cindex) in filterColumns " :prop="column.field" :label="column.title" |
| | | :min-width="column.width" :formatter="formatter" :fixed="column.fixed" :key="column.field + cindex" |
| | | :align="column.align" :sortable="column.sort ? 'custom' : false" :show-overflow-tooltip="true"> |
| | | <template #header> |
| | | <span v-if="(column.require || column.required) && column.edit" class="column-required" |
| | | >*</span |
| | | >{{ column.title }} |
| | | <span v-if="(column.require || column.required) && column.edit" class="column-required">*</span>{{ column.title |
| | | }} |
| | | </template> |
| | | |
| | | <template #default="scope"> |
| | | <!-- 2022.01.08å¢å å¤è¡¨å¤´ï¼ç°å¨åªæ¯æå¸¸ç¨åè½æ¸²æï¼ä¸æ¯æç¼è¾åè½(æ¶åå°ç»ä»¶éå) --> |
| | | <el-table-column |
| | | style="border: none" |
| | | v-for="columnChildren in filterChildrenColumn(column.children)" |
| | | :key="columnChildren.field" |
| | | :min-width="columnChildren.width" |
| | | :class-name="columnChildren.class" |
| | | :prop="columnChildren.field" |
| | | :align="columnChildren.align" |
| | | :label="columnChildren.title" |
| | | > |
| | | <el-table-column style="border: none" v-for="columnChildren in filterChildrenColumn(column.children)" |
| | | :key="columnChildren.field" :min-width="columnChildren.width" :class-name="columnChildren.class" |
| | | :prop="columnChildren.field" :align="columnChildren.align" :label="columnChildren.title"> |
| | | <template #default="scopeChildren"> |
| | | <a |
| | | href="javascript:void(0);" |
| | | style="text-decoration: none" |
| | | @click="link(scopeChildren.row, columnChildren, $event)" |
| | | v-if="columnChildren.link" |
| | | v-text="scopeChildren.row[columnChildren.field]" |
| | | ></a> |
| | | <table-render |
| | | v-else-if="columnChildren.render && typeof columnChildren.render == 'function'" |
| | | :row="scopeChildren.row" |
| | | key="rd-01" |
| | | :index="scope.$index" |
| | | :column="columnChildren" |
| | | :render="columnChildren.render" |
| | | ></table-render> |
| | | <div |
| | | v-else-if="columnChildren.formatter" |
| | | @click=" |
| | | columnChildren.click && |
| | | columnChildren.click(scopeChildren.row, columnChildren, scopeChildren.$index) |
| | | " |
| | | v-html=" |
| | | columnChildren.formatter(scopeChildren.row, columnChildren, scopeChildren.$index) |
| | | " |
| | | ></div> |
| | | <a href="javascript:void(0);" style="text-decoration: none" |
| | | @click="link(scopeChildren.row, columnChildren, $event)" v-if="columnChildren.link" |
| | | v-text="scopeChildren.row[columnChildren.field]"></a> |
| | | <table-render v-else-if="columnChildren.render && typeof columnChildren.render == 'function'" |
| | | :row="scopeChildren.row" key="rd-01" :index="scope.$index" :column="columnChildren" |
| | | :render="columnChildren.render"></table-render> |
| | | <div v-else-if="columnChildren.formatter" @click=" |
| | | columnChildren.click && |
| | | columnChildren.click(scopeChildren.row, columnChildren, scopeChildren.$index) |
| | | " v-html="columnChildren.formatter(scopeChildren.row, columnChildren, scopeChildren.$index) |
| | | "></div> |
| | | <div v-else-if="columnChildren.bind"> |
| | | {{ formatter(scopeChildren.row, columnChildren, true) }} |
| | | </div> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | <!-- 2020.06.18å¢å render渲æèªå®ä¹å
容 --> |
| | | <table-render |
| | | v-if="column.render && typeof column.render == 'function'" |
| | | :row="scope.row" |
| | | key="rd-01" |
| | | :index="scope.$index" |
| | | :column="column" |
| | | :render="column.render" |
| | | ></table-render> |
| | | <table-render v-if="column.render && typeof column.render == 'function'" :row="scope.row" key="rd-01" |
| | | :index="scope.$index" :column="column" :render="column.render"></table-render> |
| | | <!-- å¯ç¨åå»ç¼è¾åè½ï¼å¸¦ç¼è¾åè½çä¸ä¼æ¸²æä¸ææ¡ææ¬èæ¯é¢è² --> |
| | | <!-- @click="rowBeginEdit(scope.$index,cindex)" --> |
| | | <!-- 2021.09.21å¢å ç¼è¾æ¶å¯¹readonly屿§å¤æ --> |
| | | <template |
| | | v-else-if=" |
| | | column.edit && |
| | | !column.readonly && |
| | | ['file', 'img', 'excel'].indexOf(column.edit.type) != -1 |
| | | " |
| | | > |
| | | <template v-else-if="column.edit && |
| | | !column.readonly && |
| | | ['file', 'img', 'excel'].indexOf(column.edit.type) != -1 |
| | | "> |
| | | <div style="display: flex; align-items: center" @click.stop> |
| | | <i |
| | | v-if="!column.showUpload || column.showUpload(scope.row, column)" |
| | | <i v-if="!column.showUpload || column.showUpload(scope.row, column)" |
| | | style="padding: 3px; margin-right: 10px; color: #8f9293; cursor: pointer" |
| | | @click="showUpload(scope.row, column)" |
| | | class="el-icon-upload" |
| | | ></i> |
| | | @click="showUpload(scope.row, column)" class="el-icon-upload"></i> |
| | | <template v-if="column.edit.type == 'img'"> |
| | | <img |
| | | v-for="(file, imgIndex) in getFilePath(scope.row[column.field], column)" |
| | | :key="imgIndex" |
| | | @error="handleImageError" |
| | | @click="viewImg(scope.row, column, file.path, $event, imgIndex)" |
| | | class="table-img" |
| | | :src="file.path" |
| | | /> |
| | | <img v-for="(file, imgIndex) in getFilePath(scope.row[column.field], column)" :key="imgIndex" |
| | | @error="handleImageError" @click="viewImg(scope.row, column, file.path, $event, imgIndex)" |
| | | class="table-img" :src="file.path" /> |
| | | </template> |
| | | <a |
| | | style="margin-right: 8px" |
| | | v-else |
| | | class="t-file" |
| | | v-for="(file, fIndex) in getFilePath(scope.row[column.field], column)" |
| | | :key="fIndex" |
| | | @click="dowloadFile(file)" |
| | | >{{ file.name }}</a |
| | | > |
| | | <a style="margin-right: 8px" v-else class="t-file" |
| | | v-for="(file, fIndex) in getFilePath(scope.row[column.field], column)" :key="fIndex" |
| | | @click="dowloadFile(file)">{{ file.name }}</a> |
| | | </div> |
| | | </template> |
| | | <div |
| | | v-else-if=" |
| | | column.edit && !column.readonly && (column.edit.keep || edit.rowIndex == scope.$index) |
| | | " |
| | | class="edit-el" |
| | | > |
| | | <div v-else-if="column.edit && !column.readonly && (column.edit.keep || edit.rowIndex == scope.$index) |
| | | " class="edit-el"> |
| | | <div @click.stop class="e-item"> |
| | | <div> |
| | | <!-- 2020.07.24å¢å æ¥æonChangeäºä»¶ --> |
| | | <el-date-picker |
| | | clearable |
| | | size="default" |
| | | style="width: 100%" |
| | | v-if="['date', 'datetime'].indexOf(column.edit.type) != -1" |
| | | v-model="scope.row[column.field]" |
| | | @change=" |
| | | (val) => { |
| | | column.onChange && column.onChange(scope.row, column, val) |
| | | } |
| | | " |
| | | :type="column.edit.type" |
| | | :placeholder="column.placeholder || column.title" |
| | | :disabledDate="(val) => getDateOptions(val, column)" |
| | | :value-format="getDateFormat(column)" |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | > |
| | | <el-date-picker clearable size="default" style="width: 100%" |
| | | v-if="['date', 'datetime'].indexOf(column.edit.type) != -1" v-model="scope.row[column.field]" @change="(val) => { |
| | | column.onChange && column.onChange(scope.row, column, val) |
| | | } |
| | | " :type="column.edit.type" :placeholder="column.placeholder || column.title" |
| | | :disabledDate="(val) => getDateOptions(val, column)" :value-format="getDateFormat(column)" |
| | | :disabled="initColumnDisabled(scope.row, column)"> |
| | | </el-date-picker> |
| | | <el-time-picker |
| | | clearable |
| | | size="default" |
| | | style="width: 100%" |
| | | v-else-if="column.edit.type == 'time'" |
| | | v-model="scope.row[column.field]" |
| | | @change=" |
| | | (val) => { |
| | | column.onChange && column.onChange(scope.row, column, val) |
| | | } |
| | | " |
| | | :placeholder="column.placeholder || column.title" |
| | | :value-format="column.format || 'HH:mm:ss'" |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | > |
| | | <el-time-picker clearable size="default" style="width: 100%" v-else-if="column.edit.type == 'time'" |
| | | v-model="scope.row[column.field]" @change="(val) => { |
| | | column.onChange && column.onChange(scope.row, column, val) |
| | | } |
| | | " :placeholder="column.placeholder || column.title" :value-format="column.format || 'HH:mm:ss'" |
| | | :disabled="initColumnDisabled(scope.row, column)"> |
| | | </el-time-picker> |
| | | <el-switch |
| | | v-else-if="column.edit.type == 'switch'" |
| | | v-model="scope.row[column.field]" |
| | | active-color="#0f84ff" |
| | | inactive-color="rgb(194 194 194)" |
| | | active-text="æ¯" |
| | | inactive-text="å¦" |
| | | inline-prompt |
| | | @change=" |
| | | (val) => { |
| | | switchChange(val, scope.row, column) |
| | | } |
| | | " |
| | | :active-value=" |
| | | typeof scope.row[column.field] == 'boolean' |
| | | ? true |
| | | : typeof scope.row[column.field] == 'string' |
| | | ? '1' |
| | | : 1 |
| | | " |
| | | :inactive-value=" |
| | | typeof scope.row[column.field] == 'boolean' |
| | | ? false |
| | | : typeof scope.row[column.field] == 'string' |
| | | ? '0' |
| | | : 0 |
| | | " |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | > |
| | | <el-switch v-else-if="column.edit.type == 'switch'" v-model="scope.row[column.field]" |
| | | active-color="#0f84ff" inactive-color="rgb(194 194 194)" active-text="æ¯" inactive-text="å¦" inline-prompt |
| | | @change="(val) => { |
| | | switchChange(val, scope.row, column) |
| | | } |
| | | " :active-value="typeof scope.row[column.field] == 'boolean' |
| | | ? true |
| | | : typeof scope.row[column.field] == 'string' |
| | | ? '1' |
| | | : 1 |
| | | " :inactive-value="typeof scope.row[column.field] == 'boolean' |
| | | ? false |
| | | : typeof scope.row[column.field] == 'string' |
| | | ? '0' |
| | | : 0 |
| | | " :disabled="initColumnDisabled(scope.row, column)"> |
| | | </el-switch> |
| | | <template v-else-if="['select', 'selectList'].indexOf(column.edit.type) != -1"> |
| | | <el-select-v2 |
| | | style="width: 100%" |
| | | :size="size" |
| | | v-if="column.bind.data.length >= select2Count" |
| | | v-model="scope.row[column.field]" |
| | | filterable |
| | | :multiple="column.edit.type == 'select' ? false : true" |
| | | :placeholder="column.placeholder || column.title" |
| | | :autocomplete="column.autocomplete" |
| | | :options="column.bind.data" |
| | | @change="column.onChange && column.onChange(scope.row, column)" |
| | | clearable |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | > |
| | | <el-select-v2 style="width: 100%" :size="size" v-if="column.bind.data.length >= select2Count" |
| | | v-model="scope.row[column.field]" filterable :multiple="column.edit.type == 'select' ? false : true" |
| | | :placeholder="column.placeholder || column.title" :autocomplete="column.autocomplete" |
| | | :options="column.bind.data" @change="column.onChange && column.onChange(scope.row, column)" clearable |
| | | :disabled="initColumnDisabled(scope.row, column)"> |
| | | <template #default="{ item }"> |
| | | {{ item.label }} |
| | | </template> |
| | | </el-select-v2> |
| | | |
| | | <el-select |
| | | size="default" |
| | | style="width: 100%" |
| | | v-else |
| | | v-model="scope.row[column.field]" |
| | | <el-select size="default" style="width: 100%" v-else v-model="scope.row[column.field]" |
| | | :filterable="column.filter || column.bind.data.length > 10 ? true : false" |
| | | :multiple="column.edit.type == 'select' ? false : true" |
| | | :placeholder="column.placeholder || column.title" |
| | | :allow-create="column.autocomplete" |
| | | @change="column.onChange && column.onChange(scope.row, column)" |
| | | clearable |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | > |
| | | <el-option |
| | | v-for="item in column.bind.data" |
| | | :key="item.key" |
| | | v-show="!item.hidden" |
| | | :disabled="item.disabled" |
| | | :label="item.value" |
| | | :value="item.key" |
| | | >{{ item.value }} |
| | | :placeholder="column.placeholder || column.title" :allow-create="column.autocomplete" |
| | | @change="column.onChange && column.onChange(scope.row, column)" clearable |
| | | :disabled="initColumnDisabled(scope.row, column)"> |
| | | <el-option v-for="item in column.bind.data" :key="item.key" v-show="!item.hidden" |
| | | :disabled="item.disabled" :label="item.value" :value="item.key">{{ item.value }} |
| | | </el-option> |
| | | </el-select> |
| | | </template> |
| | | <el-tree-select |
| | | style="width: 100%" |
| | | <el-tree-select style="width: 100%" |
| | | v-else-if="column.edit.type == 'treeSelect' || column.edit.type == 'cascader'" |
| | | v-model="scope.row[column.field]" |
| | | :data="column.bind.data" |
| | | :multiple="column.multiple === undefined ? true : column.multiple" |
| | | :render-after-expand="false" |
| | | :show-checkbox="true" |
| | | :check-strictly="column.checkStrictly === undefined ? true : column.checkStrictly" |
| | | check-on-click-node |
| | | node-key="key" |
| | | @change="column.onChange && column.onChange(scope.row, column)" |
| | | :props="{ label: 'label' }" |
| | | > |
| | | v-model="scope.row[column.field]" :data="column.bind.data" |
| | | :multiple="column.multiple === undefined ? true : column.multiple" :render-after-expand="false" |
| | | :show-checkbox="true" :check-strictly="column.checkStrictly === undefined ? true : column.checkStrictly" |
| | | check-on-click-node node-key="key" @change="column.onChange && column.onChange(scope.row, column)" |
| | | :props="{ label: 'label' }"> |
| | | <template #default="{ data, node }"> {{ data.label }}</template> |
| | | </el-tree-select> |
| | | <!-- <div v-else-if="column.edit.type == 'cascader'">4444444</div> --> |
| | |
| | | @change="column.onChange && column.onChange(scope.row, column)" |
| | | > |
| | | </el-cascader> --> |
| | | <el-input |
| | | v-else-if="column.edit.type == 'textarea'" |
| | | type="textarea" |
| | | :placeholder="column.placeholder || column.title" |
| | | v-model="scope.row[column.field]" |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | > |
| | | <el-input v-else-if="column.edit.type == 'textarea'" type="textarea" |
| | | :placeholder="column.placeholder || column.title" v-model="scope.row[column.field]" |
| | | :disabled="initColumnDisabled(scope.row, column)"> |
| | | </el-input> |
| | | <input |
| | | class="table-input" |
| | | v-else-if="!column.summary && !column.onKeyPress" |
| | | v-model.lazy="scope.row[column.field]" |
| | | :placeholder="column.placeholder || column.title" |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | /> |
| | | <el-input |
| | | v-else |
| | | @change="inputKeyPress(scope.row, column, $event)" |
| | | <input class="table-input" v-else-if="!column.summary && !column.onKeyPress" |
| | | v-model.lazy="scope.row[column.field]" :placeholder="column.placeholder || column.title" |
| | | :disabled="initColumnDisabled(scope.row, column)" /> |
| | | <el-input v-else @change="inputKeyPress(scope.row, column, $event)" |
| | | @input="inputKeyPress(scope.row, column, $event)" |
| | | @keyup.enter="inputKeyPress(scope.row, column, $event)" |
| | | size="default" |
| | | v-model="scope.row[column.field]" |
| | | @keyup.enter="inputKeyPress(scope.row, column, $event)" size="default" v-model="scope.row[column.field]" |
| | | :placeholder="column.placeholder || column.title" |
| | | :disabled="initColumnDisabled(scope.row, column)" |
| | | ></el-input> |
| | | :disabled="initColumnDisabled(scope.row, column)"></el-input> |
| | | </div> |
| | | <div class="extra" v-if="column.extra && edit.rowIndex == scope.$index"> |
| | | <a |
| | | :style="column.extra.style" |
| | | style="text-decoration: none" |
| | | @click="extraClick(scope.row, column)" |
| | | > |
| | | <a :style="column.extra.style" style="text-decoration: none" @click="extraClick(scope.row, column)"> |
| | | <i v-if="column.extra.icon" :class="[column.extra.icon]" /> |
| | | {{ column.extra.text }} |
| | | </a> |
| | |
| | | </div> |
| | | <!--没æç¼è¾åè½çç´æ¥æ¸²ææ ç¾--> |
| | | <template v-else> |
| | | <a |
| | | href="javascript:void(0)" |
| | | style="text-decoration: none; line-height: 1.3" |
| | | @click="link(scope.row, column, $event)" |
| | | v-if="column.link" |
| | | v-text="scope.row[column.field]" |
| | | ></a> |
| | | <img |
| | | v-else-if="column.type == 'img'" |
| | | v-for="(file, imgIndex) in getFilePath(scope.row[column.field], column)" |
| | | :key="imgIndex" |
| | | @error="handleImageError" |
| | | @click="viewImg(scope.row, column, file.path, $event, imgIndex)" |
| | | class="table-img" |
| | | :src="file.path" |
| | | /> |
| | | <a |
| | | style="margin-right: 8px" |
| | | v-else-if="column.type == 'file' || column.type == 'excel'" |
| | | class="t-file" |
| | | v-for="(file, fIndex) in getFilePath(scope.row[column.field], column)" |
| | | :key="fIndex" |
| | | @click="dowloadFile(file)" |
| | | >{{ file.name }}</a |
| | | > |
| | | <a href="javascript:void(0)" style="text-decoration: none; line-height: 1.3" |
| | | @click="link(scope.row, column, $event)" v-if="column.link" v-text="scope.row[column.field]"></a> |
| | | <img v-else-if="column.type == 'img'" v-for="(file, imgIndex) in getFilePath(scope.row[column.field], column)" |
| | | :key="imgIndex" @error="handleImageError" @click="viewImg(scope.row, column, file.path, $event, imgIndex)" |
| | | class="table-img" :src="file.path" /> |
| | | <a style="margin-right: 8px" v-else-if="column.type == 'file' || column.type == 'excel'" class="t-file" |
| | | v-for="(file, fIndex) in getFilePath(scope.row[column.field], column)" :key="fIndex" |
| | | @click="dowloadFile(file)">{{ file.name }}</a> |
| | | <span v-else-if="column.type == 'date'">{{ formatterDate(scope.row, column) }}</span> |
| | | <div |
| | | v-else-if="column.formatter" |
| | | @click="formatterClick(scope.row, column, $event)" |
| | | v-html="column.formatter(scope.row, column)" |
| | | ></div> |
| | | <div v-else-if="column.type == 'jsx'" @click="formatterClick(scope.row, column, $event)"> |
| | | <el-button v-for="item in column.formatter(scope.row, column) " :key="item" :type="item.type">{{ |
| | | item.name |
| | | }}</el-button> |
| | | </div> |
| | | <div v-else-if="column.formatter" @click="formatterClick(scope.row, column, $event)" |
| | | v-html="column.formatter(scope.row, column)"></div> |
| | | |
| | | <!-- 2021.11.18ä¿®å¤tableæ°æ®æºè®¾ç½®ä¸ºnormalåç¹å»è¡$event缺失çé®é¢ --> |
| | | <div |
| | | v-else-if="column.bind && (column.normal || column.edit)" |
| | | <div v-else-if="column.bind && (column.normal || column.edit)" |
| | | @click="formatterClick(scope.row, column, $event)" |
| | | :style="column.getStyle && column.getStyle(scope.row, column)" |
| | | > |
| | | :style="column.getStyle && column.getStyle(scope.row, column)"> |
| | | {{ formatter(scope.row, column, true) }} |
| | | </div> |
| | | <div |
| | | v-else-if="column.click && !column.bind" |
| | | @click="formatterClick(scope.row, column)" |
| | | > |
| | | <div v-else-if="column.click && !column.bind" @click="formatterClick(scope.row, column)"> |
| | | {{ scope.row[column.field] }} |
| | | </div> |
| | | <div |
| | | @click=" |
| | | () => { |
| | | column.click && formatterClick(scope.row, column) |
| | | } |
| | | " |
| | | v-else-if="column.bind" |
| | | > |
| | | <el-tag |
| | | v-if="useTag" |
| | | class="cell-tag" |
| | | :class="[isEmptyTag(scope.row, column)]" |
| | | :type="getColor(scope.row, column)" |
| | | :effect="column.effect" |
| | | >{{ formatter(scope.row, column, true) }}</el-tag |
| | | > |
| | | <div @click="() => { |
| | | column.click && formatterClick(scope.row, column) |
| | | } |
| | | " v-else-if="column.bind"> |
| | | <el-tag v-if="useTag" class="cell-tag" :class="[isEmptyTag(scope.row, column)]" |
| | | :type="getColor(scope.row, column)" :effect="column.effect">{{ formatter(scope.row, column, true) |
| | | }}</el-tag> |
| | | <template v-else>{{ formatter(scope.row, column, true) }}</template> |
| | | </div> |
| | | |
| | |
| | | <template v-if="!paginationHide"> |
| | | <div class="block pagination" key="pagination-01" style="display: flex"> |
| | | <div style="flex: 1"></div> |
| | | <el-pagination |
| | | key="pagination-02" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page="paginations.page" |
| | | :page-sizes="paginations.sizes" |
| | | :page-size="paginations.size" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="paginations.total" |
| | | ></el-pagination> |
| | | <el-pagination key="pagination-02" @size-change="handleSizeChange" @current-change="handleCurrentChange" |
| | | :current-page="paginations.page" :page-sizes="paginations.sizes" :page-size="paginations.size" |
| | | layout="total, sizes, prev, pager, next, jumper" :total="paginations.total"></el-pagination> |
| | | </div> |
| | | </template> |
| | | </div> |
| | |
| | | <VolBox v-model="uploadModel" title="ä¸ä¼ " :height="228" :width="500" :padding="15" lazy> |
| | | <!-- ä¸ä¼ å¾çãexcelæå
¶ä»æä»¶ãæä»¶æ°éã大å°éå¶é½å¯ä»¥ï¼åç
§voluploadç»ä»¶api --> |
| | | <div style="height: 200px; display: flex; align-items: center"> |
| | | <VolUpload |
| | | style="text-align: center" |
| | | :autoUpload="currentColumn.edit.autoUpload" |
| | | :multiple="currentColumn.edit.multiple" |
| | | :url="uploadUrl" |
| | | :max-file="currentColumn.edit.maxFile" |
| | | :img="currentColumn.edit.type == 'img'" |
| | | :excel="currentColumn.edit.type == 'excel'" |
| | | :fileTypes="currentColumn.edit.fileTypes ? currentColumn.edit.fileTypes : []" |
| | | :fileInfo="fileInfo" |
| | | :upload-after="uploadAfter" |
| | | :upload-before="uploadBefore" |
| | | :append="currentColumn.edit.accept" |
| | | > |
| | | <VolUpload style="text-align: center" :autoUpload="currentColumn.edit.autoUpload" |
| | | :multiple="currentColumn.edit.multiple" :url="uploadUrl" :max-file="currentColumn.edit.maxFile" |
| | | :img="currentColumn.edit.type == 'img'" :excel="currentColumn.edit.type == 'excel'" |
| | | :fileTypes="currentColumn.edit.fileTypes ? currentColumn.edit.fileTypes : []" :fileInfo="fileInfo" |
| | | :upload-after="uploadAfter" :upload-before="uploadBefore" :append="currentColumn.edit.accept"> |
| | | <div>{{ currentColumn.message }}</div> |
| | | </VolUpload> |
| | | </div> |
| | |
| | | }, |
| | | spanMethod: { |
| | | type: Function, |
| | | default: ({ row, column, rowIndex, columnIndex }) => {} |
| | | default: ({ row, column, rowIndex, columnIndex }) => { } |
| | | }, |
| | | lazy: { |
| | | //æ å½¢è¡¨æ ¼æ¯å¦é»è®¤å»¶è¿å è½½ |
| | |
| | | // } |
| | | return |
| | | }, |
| | | toggleEdit(event) {}, |
| | | toggleEdit(event) { }, |
| | | setEditStatus(status) { |
| | | // this.columns.forEach((x) => { |
| | | // if (x.hasOwnProperty("edit")) { |
| | |
| | | } |
| | | } |
| | | }, |
| | | getInputChangeSummaries() {}, |
| | | getInputChangeSummaries() { }, |
| | | handleSizeChange(val) { |
| | | this.paginations.size = val |
| | | this.paginations.rows = val |
| | |
| | | // ç¼è¾å¤étableæ¾ç¤º |
| | | let valArr = (val + '').split(',') |
| | | for (let index = 0; index < valArr.length; index++) { |
| | | ;(column.bind.orginData && column.bind.orginData.length |
| | | ; (column.bind.orginData && column.bind.orginData.length |
| | | ? column.bind.orginData |
| | | : column.bind.data |
| | | ).forEach((x) => { |
| | |
| | | // columnå设置äºsummary屿§çæè®¡ç®å¼ |
| | | if (!column.summary) return |
| | | let sum = 0 |
| | | // let _index = 0; |
| | | ;(this.url ? this.rowData : this.tableData).forEach((x, index) => { |
| | | if (x.hasOwnProperty(column.field) && !isNaN(x[column.field])) { |
| | | // _index = index; |
| | | sum += x[column.field] * 1 |
| | | } |
| | | }) |
| | | // let _index = 0; |
| | | ; (this.url ? this.rowData : this.tableData).forEach((x, index) => { |
| | | if (x.hasOwnProperty(column.field) && !isNaN(x[column.field])) { |
| | | // _index = index; |
| | | sum += x[column.field] * 1 |
| | | } |
| | | }) |
| | | if (sum) { |
| | | if (column.summary == 'avg') { |
| | | sum = sum / (this.rowData.length || this.tableData.length || 1) |
| | |
| | | .e-item { |
| | | display: flex; |
| | | |
| | | > div:first-child { |
| | | >div:first-child { |
| | | flex: 1; |
| | | } |
| | | } |