| | |
| | | @selection-change="handleSelectionChange" |
| | | :header-cell-style="{ background: '#ECF4FF', color: '#666' }" |
| | | > |
| | | <el-table-column type="selection" width="40"> </el-table-column> |
| | | <el-table-column v-if="selectBox" type="selection" width="40"> </el-table-column> |
| | | <el-table-column |
| | | v-for="(item, i) in tableList.tableColumn" |
| | | :key="i" |
| | |
| | | :label="item.label" |
| | | :width="item.width" |
| | | :min-width="item.min" |
| | | sortable |
| | | show-overflow-tooltip |
| | | :sortable="item.sortable" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <span v-if="item.price">{{ "¥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span> |
| | | <span v-else>{{ scope.row[item.prop] }}</span> |
| | | <div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div> |
| | | <span v-else-if="item.isTime">{{ |
| | | dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 08:00:00" |
| | | ? "--" |
| | | : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) |
| | | }}</span> |
| | | <span v-else-if="item.isClick" class="sel-name" @click="selNameClick(scope.row)">{{ |
| | | scope.row[item.prop] |
| | | }}</span> |
| | | <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <slot name="tableButton" /> |
| | | <div slot="empty"> |
| | | <el-empty description="暂无数据"></el-empty> |
| | | </div> |
| | | </el-table> |
| | | </div> |
| | | </template> |
| | |
| | | export default { |
| | | name: "TableCommonView", |
| | | props: { |
| | | selectBox: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | tableList: { |
| | | type: Object, |
| | | default: () => { |
| | | return { |
| | | selectBox: true, |
| | | tableInfomation: [], // 接口返回数据 |
| | | tableColumn: [ |
| | | // table表单 |
| | |
| | | getSummaries(param) { |
| | | if (this.showSummary.show) { |
| | | const { columns, data } = param |
| | | console.log(param) |
| | | const sums = [] |
| | | columns.forEach((column, index) => { |
| | | if (index === this.showSummary.mergeNumber) { |
| | | sums[index] = "本页总计" |
| | | } |
| | | const values = data.map((item) => Number(item[column.property])) |
| | | // if (column.property === this.showSummary.sumProp) { |
| | | if (this.showSummary.sumProp.includes(column.property)) { |
| | | sums[index + 1] = values.reduce((prev, curr) => { |
| | | const value = Number(curr) |
| | | if (!isNaN(value)) { |
| | | return this.number_format(prev + curr, 2, ".", ",") |
| | | return prev + curr |
| | | } else { |
| | | return this.number_format(prev, 2, ".", ",") |
| | | return prev |
| | | } |
| | | }, 0) |
| | | sums[index + 1] |
| | | } |
| | | }) |
| | | // console.log(sums) |
| | | return sums |
| | | } |
| | | }, |
| | | //定义number_format方法 |
| | | // 数字换行为金额显示格式 |
| | | number_format(number, decimals, dec_point, thousands_sep) { |
| | | decimals = 2 //这里默认设置保留两位小数,也可以注释这句采用传入的参数 |
| | | /* |
| | |
| | | s[1] = s[1].substring(0, prec) //小数点位数超出长度时截取前面的位数 |
| | | } |
| | | return s.join(dec) |
| | | }, |
| | | // 时间显示 |
| | | dateFormat(fmt, date) { |
| | | let ret = "" |
| | | date = new Date(date) |
| | | const opt = { |
| | | "Y+": date.getFullYear().toString(), // 年 |
| | | "m+": (date.getMonth() + 1).toString(), // 月 |
| | | "d+": date.getDate().toString(), // 日 |
| | | "H+": date.getHours().toString(), // 时 |
| | | "M+": date.getMinutes().toString(), // 分 |
| | | "S+": date.getSeconds().toString() // 秒 |
| | | // 有其他格式化字符需求可以继续添加,必须转化成字符串 |
| | | } |
| | | for (let k in opt) { |
| | | ret = new RegExp("(" + k + ")").exec(fmt) |
| | | if (ret) { |
| | | fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")) |
| | | } |
| | | } |
| | | return fmt |
| | | }, |
| | | selNameClick(row) { |
| | | this.$emit("selCommonClick", row) |
| | | } |
| | | } |
| | | } |
| | |
| | | margin-top: 20px; |
| | | margin-right: 10px; |
| | | margin-bottom: 40px; |
| | | .blue { |
| | | width: 70px; |
| | | text-align: center; |
| | | color: #fff; |
| | | background-color: $color-primary; |
| | | border-radius: 4px; |
| | | } |
| | | .sel-name { |
| | | color: $color-primary; |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | ::v-deep { |
| | | .el-table__footer-wrapper tbody td.el-table__cell { |