|
|
@@ -2,35 +2,13 @@
|
|
|
<div style="height: 100%">
|
|
|
<!-- 表格组件 :max-height="tableheight" :height=" tableheight + 'px'" -->
|
|
|
<div class="datatable" :class="pagination ? 'inpage' : 'nopage'">
|
|
|
- <el-table
|
|
|
- ref="multipleTable"
|
|
|
- v-loading="loadingValue"
|
|
|
- :data="tableData"
|
|
|
- tooltip-effect="dark"
|
|
|
- :style="{ width: '100%' }"
|
|
|
- height="100%"
|
|
|
- :border="border"
|
|
|
- :show-summary="summary"
|
|
|
- :cell-style="cellStyleF"
|
|
|
- :header-cell-style="headerStyle"
|
|
|
- :stripe="stripe"
|
|
|
- :summary-method="getSummaries"
|
|
|
- :span-method="objectSpanMethod"
|
|
|
- :header-row-style="headerRowStyle"
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- :cell-class-name="cellClassName"
|
|
|
- :row-style="rowStyle"
|
|
|
- :show-overflow-tooltip="true"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- @row-dblclick="rowDblclick"
|
|
|
- @row-click="rowClick"
|
|
|
- @cell-dblclick="cellDblclick"
|
|
|
- @select="select"
|
|
|
- @cell-click="cellClick"
|
|
|
- @select-all="selectAll"
|
|
|
- @sort-change="sortChange"
|
|
|
- :highlight-current-row="isHighlight"
|
|
|
- >
|
|
|
+ <el-table ref="multipleTable" v-loading="loadingValue" :data="tableData" tooltip-effect="dark"
|
|
|
+ :style="{ width: '100%' }" height="100%" :border="border" :show-summary="summary" :cell-style="cellStyleF"
|
|
|
+ :header-cell-style="headerStyle" :stripe="stripe" :summary-method="getSummaries" :span-method="objectSpanMethod"
|
|
|
+ :header-row-style="headerRowStyle" :row-class-name="tableRowClassName" :cell-class-name="cellClassName"
|
|
|
+ :row-style="rowStyle" :show-overflow-tooltip="true" @selection-change="handleSelectionChange"
|
|
|
+ @row-dblclick="rowDblclick" @row-click="rowClick" @cell-dblclick="cellDblclick" @select="select"
|
|
|
+ @cell-click="cellClick" @select-all="selectAll" @sort-change="sortChange" :highlight-current-row="isHighlight">
|
|
|
<!-- highlight-current-row -->
|
|
|
<!-- @current-change="TablehandleCurrentChange" -->
|
|
|
<template slot="empty">
|
|
|
@@ -38,38 +16,21 @@
|
|
|
<p class="empty-p">暂无数据</p>
|
|
|
</template>
|
|
|
<el-table-column v-if="multiple" type="selection" width="40" />
|
|
|
- <el-table-column
|
|
|
- v-if="forId"
|
|
|
- label="序号"
|
|
|
- type="index"
|
|
|
- width="50"
|
|
|
- align="center"
|
|
|
- fixed="left"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- v-for="(item, colIndex) of column.filter(
|
|
|
- (ele) =>
|
|
|
- ele.prop &&
|
|
|
- ele.prop !== 'image' &&
|
|
|
- ele.prop !== 'lqSl' &&
|
|
|
- ele.slotScoped !== 'tags' &&
|
|
|
- ele.slotScoped !== 'operation' &&
|
|
|
- ele.slotScoped !== 'operationIcon' &&
|
|
|
- ele.slotScoped !== 'father'
|
|
|
- )"
|
|
|
- :key="colIndex"
|
|
|
- :prop="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- :align="item.hasOwnProperty('align') ? item.align : 'center'"
|
|
|
- :sortable="item.sortable"
|
|
|
- :show-overflow-tooltip="
|
|
|
- item.hasOwnProperty('showoverflowtooltip')
|
|
|
- ? item.showoverflowtooltip
|
|
|
- : true
|
|
|
- "
|
|
|
- :fixed="item.hasOwnProperty('fixed') ? item.fixed : false"
|
|
|
- >
|
|
|
+ <el-table-column v-if="forId" label="序号" type="index" width="50" align="center" fixed="left" />
|
|
|
+ <el-table-column v-for="(item, colIndex) of column.filter(
|
|
|
+ (ele) =>
|
|
|
+ ele.prop &&
|
|
|
+ ele.prop !== 'image' &&
|
|
|
+ ele.prop !== 'lqSl' &&
|
|
|
+ ele.slotScoped !== 'tags' &&
|
|
|
+ ele.slotScoped !== 'operation' &&
|
|
|
+ ele.slotScoped !== 'operationIcon' &&
|
|
|
+ ele.slotScoped !== 'father'
|
|
|
+ )" :key="colIndex" :prop="item.prop" :label="item.label" :width="item.width"
|
|
|
+ :align="item.hasOwnProperty('align') ? item.align : 'center'" :sortable="item.sortable" :show-overflow-tooltip="item.hasOwnProperty('showoverflowtooltip')
|
|
|
+ ? item.showoverflowtooltip
|
|
|
+ : true
|
|
|
+ " :fixed="item.hasOwnProperty('fixed') ? item.fixed : false">
|
|
|
<template slot-scope="{ row }">
|
|
|
<!-- <template v-if="row[item.prop]||String(row[item.prop])==='0'||String(row[item.prop])==='00'">
|
|
|
<span v-if="item.formatter" v-html="(item.formatter)(row,item.prop,row[item.prop],colIndex)" />
|
|
|
@@ -79,11 +40,11 @@
|
|
|
<span>--</span>
|
|
|
</template> -->
|
|
|
<template v-if="item.formatter">
|
|
|
- <span
|
|
|
- v-html="
|
|
|
- item.formatter(row, item.prop, row[item.prop], colIndex)
|
|
|
- "
|
|
|
- />
|
|
|
+ <span v-html="item.formatter(row, item.prop, row[item.prop], colIndex)" />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.renderer">
|
|
|
+ <render-column :renderer="item.renderer"
|
|
|
+ :scope="{ row, column: item.prop, value: row[item.prop], index: colIndex }" />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<!-- 添加百分比格式 -->
|
|
|
@@ -91,176 +52,94 @@
|
|
|
<span v-else-if="item.prop2 && row[item.prop2][item.prop]">{{
|
|
|
row[item.prop2][item.prop]
|
|
|
}}</span>
|
|
|
- <span
|
|
|
- v-else-if="
|
|
|
- row[item.prop] ||
|
|
|
+ <span v-else-if="row[item.prop] ||
|
|
|
String(row[item.prop]) === '0' ||
|
|
|
String(row[item.prop]) === '00'
|
|
|
- "
|
|
|
- >{{ row[item.prop] }}</span
|
|
|
- >
|
|
|
+ ">{{ row[item.prop] }}</span>
|
|
|
<span v-else>--</span>
|
|
|
</template>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
|
|
|
<!-- 附件下载 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item of column.filter((ele) => ele.slotScoped === 'dwonfile')"
|
|
|
- :key="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- >
|
|
|
+ <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'dwonfile')" :key="item.prop"
|
|
|
+ :label="item.label" :width="item.width">
|
|
|
<template v-if="data.row.isdownfile" slot-scope="data">
|
|
|
- <span
|
|
|
- v-for="act in item.acts"
|
|
|
- :key="act.emitWay"
|
|
|
- :style="{
|
|
|
- color: act.color,
|
|
|
- cursor: 'pointer',
|
|
|
- marginRight: '10px',
|
|
|
- }"
|
|
|
- @click.stop="operation(act.emitWay, data)"
|
|
|
- >
|
|
|
+ <span v-for="act in item.acts" :key="act.emitWay" :style="{
|
|
|
+ color: act.color,
|
|
|
+ cursor: 'pointer',
|
|
|
+ marginRight: '10px',
|
|
|
+ }" @click.stop="operation(act.emitWay, data)">
|
|
|
{{ act.operation }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- 操作 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item of column.filter((ele) => ele.slotScoped === 'action')"
|
|
|
- :key="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- :align="item.hasOwnProperty('align') ? item.align : 'center'"
|
|
|
- >
|
|
|
+ <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'action')" :key="item.prop"
|
|
|
+ :label="item.label" :width="item.width" :align="item.hasOwnProperty('align') ? item.align : 'center'">
|
|
|
<template slot-scope="data">
|
|
|
- <span
|
|
|
- v-for="act in item.acts"
|
|
|
- :key="act.emitWay"
|
|
|
- :style="{
|
|
|
- color: act.color,
|
|
|
- cursor: 'pointer',
|
|
|
- marginRight: '10px',
|
|
|
- }"
|
|
|
- @click.stop="operation(act.emitWay, data)"
|
|
|
- >
|
|
|
+ <span v-for="act in item.acts" :key="act.emitWay" :style="{
|
|
|
+ color: act.color,
|
|
|
+ cursor: 'pointer',
|
|
|
+ marginRight: '10px',
|
|
|
+ }" @click.stop="operation(act.emitWay, data)">
|
|
|
{{ act.operation }}
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- 多级 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item of column.filter((ele) => ele.slotScoped === 'father')"
|
|
|
- :key="item.label"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- v-for="data of item.children"
|
|
|
- :key="data.prop"
|
|
|
- :prop="data.prop"
|
|
|
- :label="data.label"
|
|
|
- :width="data.width"
|
|
|
- />
|
|
|
+ <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'father')" :key="item.label"
|
|
|
+ :label="item.label" :width="item.width">
|
|
|
+ <el-table-column v-for="data of item.children" :key="data.prop" :prop="data.prop" :label="data.label"
|
|
|
+ :width="data.width" />
|
|
|
</el-table-column>
|
|
|
<!-- 操作 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item of column.filter((ele) => ele.slotScoped === 'operation')"
|
|
|
- :key="item.label"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- >
|
|
|
+ <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'operation')" :key="item.label"
|
|
|
+ :label="item.label" :width="item.width">
|
|
|
<template slot-scope="scope">
|
|
|
- <span
|
|
|
- :style="{
|
|
|
- color: '#409EFF',
|
|
|
- cursor: 'pointer',
|
|
|
- marginRight: '10px',
|
|
|
- }"
|
|
|
- @click.stop="operationClick(scope.row)"
|
|
|
- >{{ item.prop }}</span
|
|
|
- >
|
|
|
+ <span :style="{
|
|
|
+ color: '#409EFF',
|
|
|
+ cursor: 'pointer',
|
|
|
+ marginRight: '10px',
|
|
|
+ }" @click.stop="operationClick(scope.row)">{{ item.prop }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- 图标操作 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item of column.filter(
|
|
|
- (ele) => ele.slotScoped === 'operationIcon'
|
|
|
- )"
|
|
|
- :key="item.label"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- >
|
|
|
+ <el-table-column v-for="item of column.filter(
|
|
|
+ (ele) => ele.slotScoped === 'operationIcon'
|
|
|
+ )" :key="item.label" :label="item.label" :width="item.width">
|
|
|
<template slot-scope="scope">
|
|
|
<el-tooltip :content="item.content" placement="bottom">
|
|
|
- <i
|
|
|
- :class="item.prop"
|
|
|
- style="cursor: pointer"
|
|
|
- @click.stop="operationClickIcon(scope.row)"
|
|
|
- />
|
|
|
+ <i :class="item.prop" style="cursor: pointer" @click.stop="operationClickIcon(scope.row)" />
|
|
|
</el-tooltip>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- //筛选 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item of column.filter((ele) => ele.slotScoped === 'tags')"
|
|
|
- :key="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :prop="item.prop"
|
|
|
- :width="item.width"
|
|
|
- :filter-method="filterTag"
|
|
|
- :filters="filters"
|
|
|
- filter-placement="bottom-end"
|
|
|
- >
|
|
|
+ <el-table-column v-for="item of column.filter((ele) => ele.slotScoped === 'tags')" :key="item.prop"
|
|
|
+ :label="item.label" :prop="item.prop" :width="item.width" :filter-method="filterTag" :filters="filters"
|
|
|
+ filter-placement="bottom-end">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag
|
|
|
- :type="scope.row[item.prop] === '0' ? 'primary' : 'danger'"
|
|
|
- disable-transitions
|
|
|
- >{{ tagNamelist[scope.row[item.prop]] }}</el-tag
|
|
|
- >
|
|
|
+ <el-tag :type="scope.row[item.prop] === '0' ? 'primary' : 'danger'" disable-transitions>{{
|
|
|
+ tagNamelist[scope.row[item.prop]] }}</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- sortable排序 show-overflow-tooltip影藏 -->
|
|
|
<!-- 图片 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item in column.filter((ele) => ele.prop === 'image')"
|
|
|
- :key="item.prop"
|
|
|
- :prop="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- >
|
|
|
+ <el-table-column v-for="item in column.filter((ele) => ele.prop === 'image')" :key="item.prop" :prop="item.prop"
|
|
|
+ :label="item.label" :width="item.width">
|
|
|
<template slot-scope="scope">
|
|
|
<el-popover placement="top-start" title trigger="click">
|
|
|
- <img
|
|
|
- :src="scope.row.image"
|
|
|
- alt
|
|
|
- style="width: 100%; height: 100%"
|
|
|
- />
|
|
|
- <img
|
|
|
- slot="reference"
|
|
|
- :src="scope.row.image"
|
|
|
- style="width: 50px; height: 50px"
|
|
|
- />
|
|
|
+ <img :src="scope.row.image" alt style="width: 100%; height: 100%" />
|
|
|
+ <img slot="reference" :src="scope.row.image" style="width: 50px; height: 50px" />
|
|
|
</el-popover>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<!-- //加入计数器 -->
|
|
|
- <el-table-column
|
|
|
- v-for="item in column.filter((ele) => ele.prop === 'lqSl')"
|
|
|
- :key="item.prop"
|
|
|
- :prop="item.prop"
|
|
|
- :label="item.label"
|
|
|
- :width="item.width"
|
|
|
- >
|
|
|
+ <el-table-column v-for="item in column.filter((ele) => ele.prop === 'lqSl')" :key="item.prop" :prop="item.prop"
|
|
|
+ :label="item.label" :width="item.width">
|
|
|
<template slot-scope="scope">
|
|
|
<div @click.stop>
|
|
|
- <el-input-number
|
|
|
- v-model="scope.row.lqSl"
|
|
|
- :min="0"
|
|
|
- :max="scope.row.kcNum"
|
|
|
- size="mini"
|
|
|
- />
|
|
|
+ <el-input-number v-model="scope.row.lqSl" :min="0" :max="scope.row.kcNum" size="mini" />
|
|
|
</div>
|
|
|
|
|
|
<!-- @change="handleCareOrderItemNumChange(scope.row)" -->
|
|
|
@@ -269,23 +148,18 @@
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div v-if="pagination" class="pagination-area">
|
|
|
- <el-pagination
|
|
|
- :current-page="currentpage"
|
|
|
- :page-sizes="[1, 10, 20, 30, 50, 100, 500, 1000]"
|
|
|
- :page-size="pagesize"
|
|
|
- :total="total"
|
|
|
- background
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- />
|
|
|
+ <el-pagination :current-page="currentpage" :page-sizes="[1, 10, 20, 30, 50, 100, 500, 1000]" :page-size="pagesize"
|
|
|
+ :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import RenderColumn from "./RenderColumn.vue";
|
|
|
export default {
|
|
|
name: "Table",
|
|
|
+ components: { RenderColumn },
|
|
|
props: {
|
|
|
tableData: {
|
|
|
type: Array,
|
|
|
@@ -300,7 +174,7 @@ export default {
|
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
|
tagNamelist: {
|
|
|
type: Object,
|
|
|
- default: () => {},
|
|
|
+ default: () => { },
|
|
|
required: false,
|
|
|
},
|
|
|
column: {
|
|
|
@@ -385,21 +259,21 @@ export default {
|
|
|
// default: () => {
|
|
|
// return Function
|
|
|
// }
|
|
|
- default: () => () => {},
|
|
|
+ default: () => () => { },
|
|
|
},
|
|
|
objectSpanMethod: {
|
|
|
type: Function,
|
|
|
// default: () => {
|
|
|
// return Function
|
|
|
// }
|
|
|
- default: () => () => {},
|
|
|
+ default: () => () => { },
|
|
|
},
|
|
|
getSummaries: {
|
|
|
type: Function,
|
|
|
// default: () => {
|
|
|
// return Function
|
|
|
// }
|
|
|
- default: () => () => {},
|
|
|
+ default: () => () => { },
|
|
|
},
|
|
|
// filterTag: {
|
|
|
// type: Function,
|
|
|
@@ -623,21 +497,18 @@ export default {
|
|
|
</script>
|
|
|
<style lang='scss'>
|
|
|
/* 斑马线颜色 */
|
|
|
-.el-table--striped
|
|
|
- .el-table__body
|
|
|
- tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
|
|
|
- td {
|
|
|
+.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
|
|
|
background-color: #f7f7f7;
|
|
|
}
|
|
|
|
|
|
/* 行高亮样式点击当前行样式背景高亮 */
|
|
|
-.el-table__body /deep/ tr.current-row > td {
|
|
|
+.el-table__body /deep/ tr.current-row>td {
|
|
|
background: #fdf3ea !important;
|
|
|
color: #f19944;
|
|
|
}
|
|
|
|
|
|
/* 实现hover前行样式背景高亮 */
|
|
|
-.el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
+.el-table--enable-row-hover .el-table__body tr:hover>td {
|
|
|
background-color: #fdf3ea !important;
|
|
|
color: #f19944;
|
|
|
}
|
|
|
@@ -652,7 +523,7 @@ export default {
|
|
|
padding: 2px 0 !important;
|
|
|
}
|
|
|
|
|
|
-.el-table th > .cell {
|
|
|
+.el-table th>.cell {
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
@@ -665,7 +536,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.el-table__body tr.current-row > td {
|
|
|
+.el-table__body tr.current-row>td {
|
|
|
background-color: #69a8ea !important;
|
|
|
/* background-color:red !important; */
|
|
|
color: #fff;
|
|
|
@@ -698,7 +569,7 @@ export default {
|
|
|
align-self: flex-end; */
|
|
|
}
|
|
|
|
|
|
-.pagination-area > .el-pagination {
|
|
|
+.pagination-area>.el-pagination {
|
|
|
position: relative;
|
|
|
top: 50%;
|
|
|
transform: translate(0, -50%);
|
