表格子组件代码

/* eslint-disable eqeqeq */
<template><el-table:data="gridData"sum-text="年度需求用电量"show-summaryfit:cell-class-name="cellClass"class="tb-edit"width="100%"@cell-click="cellClick"><el-table-column property="periodType" label="时段/月份" width="150" fixed :sortable="false" align="center"><template slot-scope="scope"><div v-if="scope.row.periodType == 1" class="el-input">正常时段</div><div v-else-if="scope.row.periodType == 2" class="el-input">高峰时段</div><div v-else-if="scope.row.periodType == 3" class="el-input">低谷时段</div></template></el-table-column><el-table-column v-for="i in 12" :key="i" :property="cellProperty(i)" width="100" :label="i+'月'" :sortable="false" align="center"><template slot-scope="scope"><!--  i > nowMonth 当前月及之后的月份可编辑--><el-input-number v-if="customEdit && i >= nowMonth && tabClickIndex === scope.row.index && scope.column.label === tabClickLable" v-model="scope.row[cellProperty(i)]" v-focus :controls="false" placeholder="请输入内容" @blur="inputBlur(scope)" /><div v-else class="el-input">{{ scope.row[cellProperty(i)] }}</div></template></el-table-column><el-table-column property="annualTotal" label="累计" width="100" fixed="right" :sortable="false" align="center" /></el-table>
</template>

js

<script>export default {directives: { // 局部注册'focus': {inserted: function(el) {// 聚焦元素 children[0]的原因是input标签外层Vue会自动渲染上一层divel.children[0].children[0].focus()}}},props: {gridData: {type: Array,default: () => ([])},customEdit: { // 表格月份单元格是否可编辑type: Boolean,default: true}},data() {return {nowMonth: null,tabClickIndex: null, // 当前行indextabClickLable: null // 点击的单元格label}},mounted() {this.getDate()},methods: {cellProperty(index) {switch (index) {case 1 : return 'january'case 2 : return 'february'case 3 : return 'march'case 4 : return 'april'case 5 : return 'may'case 6 : return 'june'case 7 : return 'july'case 8 : return 'august'case 9 : return 'september'case 10 : return 'october'case 11 : return 'november'case 12 : return 'december'}},getDate() { // 获取当前月份const now = new Date() // 当前日期this.nowMonth = now.getMonth() + 1 // 当前月},inputBlur(scope) {this.tabClickLable = ''if (this.customEdit) { // 可编辑时进行累计计算let count = 0for (let i = 1; i <= 12; i++) {const labelName = this.cellProperty(i)count = count + Number(scope.row[labelName])}scope.row.annualTotal = count}},cellClick(row, column, cell, event) {if (this.customEdit) {this.tabClickIndex = row.indexthis.tabClickLable = column.label}},cellClass({ row, column, rowIndex, columnIndex }) {row.index = rowIndexif ((columnIndex >= 1 && this.nowMonth > columnIndex) || !this.customEdit) {return 'gray-color'} else if (column.property === 'annualTotal') {return 'gray-color'}},}
}

style

</script><style lang="scss" scoped>
.tb-edit >>> .gray-color{background: #eee;
}
.tb-edit .el-input >>> .el-input__inner , .tb-edit .el-input-number >>> .el-input__inner{height: 23px;line-height: 23px;
}
.tb-edit .el-input-number{width: 100%;line-height: 23px;
}
</style>

表格参数

参数	说明	类型	可选值	默认值
gridData	表格数据	Array	–	[]
customEdit	表格是否可编辑	Boolean	–	true

组件函数说明

1.组件内方法说明，该表格没有抛出任何方法，不可在父组件使用

事件	说明
cellProperty	根据传值来显示1-12月份单元列显示的表头文字（label）
getDate	该函数主要用了获取当前月份，主要用于小于当前月份的单元格不可编辑
cellClick	单元格点击触发事件
cellClass	更改单元格样式
inputBlur	单元格内input失焦事件，重新计算当前行的月份累加数据

2.element show-summary开启合计后每列默认计算，可使用它的自定义合计方法做处理

methods添加方法

getSummaries(param) {const { columns, data } = paramconst sums = []const currentIndex = columns.length - 1columns.forEach((column, index) => {if (index === 0) {sums[index] = '年度需求用电量'return}const values = data.map(item => Number(item[column.property]))if (!values.every(value => isNaN(value)) && currentIndex === index) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr)if (!isNaN(value)) {return prev + curr} else {return prev}}, 0)} else {sums[index] = ''}})return sums}

局部自定义指令

主要是element-inout-number 自动聚焦

父组件使用

1.可编辑

效果

<template><el-container><el-main><tradingCapacityTable :grid-data="phaseDosage" /></el-main></el-container>
</template>
<script>
import tradingCapacityTable from '@/views/pxf-service-omarketservice/components/tradingCapacity'
export default {components: {tradingCapacityTable},data() {return {phaseDosage: [{'january': 0,'february': 0,'march': 0,'april': 0,'may': 0,'june': 0,'july': 0,'august': 0,'september': 0,'october': 0,'november': 0,'december': 0,'periodType': 1,'annualTotal': 0},{'january': 0,'february': 0,'march': 0,'april': 0,'may': 0,'june': 0,'july': 0,'august': 0,'september': 0,'october': 0,'november': 0,'december': 0,'periodType': 2,'annualTotal': 0},{'january': 0,'february': 0,'march': 0,'april': 0,'may': 0,'june': 0,'july': 0,'august': 0,'september': 0,'october': 0,'november': 0,'december': 0,'periodType': 3,'annualTotal': 0}],}

2.不可编辑

效果

  <tradingCapacityTable :grid-data="phaseDosage" :custom-edit="false" />// 数据phaseDosage: [{ 'periodType': 1 }, { 'periodType': 2 }, { 'periodType': 3 }],

element 表格点击单元格编辑，行合计相关推荐

Layui数据表格监听单元格编辑恢复原值
Layui数据表格监听单元格编辑,并获取原值 table.on('edit(test)', function(obj){ //注:edit是固定事件名,test是table原始容器的属性 lay-fi ...
【表格单元格可编辑】vue-elementul简单实现table表格点击单元格可编辑，点击单元格变成弹框修改数据
前言这是继我另一个帖子就是单元格点击变成输入框后添加的功能因为考虑到有些时候修改单元格的信息可能点击后要修改很多,那一个输入框不好用所以这时候就需要一个弹框可以把所有表单都显示出来修改所以这里 ...
Table 点击单元格编辑并获取对应的行列
如何进行编辑单元格数据: 在table中的td中加入contentEditable='true' 就可以进行编辑单元格了如何点击时获取单元格对应的行列: 在table中加入onclick事件列 ...
html表格点击为编辑框,el-table表格内双击或单击单元格编辑输入框、日期等
需求在el-table中想要直接点击单元格直接由文字显示变为编辑框状态,而非一整行编辑或者通过展示模态框编辑,这样目标性会比较清楚且页面较简洁.下面直接上代码! 实现效果 html代码 @blur= ...
el-table 点击单元格可编辑点击表头可修改右击表头删除表头和内容
项目场景: 提示:这里简述项目相关背景: 点击单元格可编辑点击表头可修改表头内容 .右击表头删除内容和表头代码 html <template><div class="a ...
html table设置行高_单元格的行高怎么设置 html语言怎么设置设置表格行高？
在Excel中,如何设置表格最合适的行高.列宽? 本次操作使用的软件为Excel电子表格,软件版本为office家庭和学生版2016. 小编只是难过不能陪你一起到老,再也没有机会,看到你的笑. 请问怎 ...
vba模拟鼠标点击_核对数据总看错，试试这个方法，点击单元格自动为整行填充颜色...
Hello,大家好,今天跟大家分享我们如何实现实现点击一个单元格,自动为数据区域的整行填充一个颜色,效果如下图,当我们点击一个单元格的时候们就会为整行填充一个颜色,这个的操作跟我们之前分享的聚光灯效果 ...
SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格、合并单元格)
本编文章继SpringBoot+Poi-tl根据Word模板动态生成word(含动态行表格)文章之后介绍Poi-tl导出word的延伸功能: 所需依赖以及word模板所属位置见 SpringBoo ...
html 鼠标单击单元格,vue-easytable点击表格中某个单元格操作
一:vue-easytable的地址 http://doc.huangsw.com/vue-easytable/app.html#/table/hideTable 二:改变当前鼠标悬浮单元格的样式 1 ...

element 表格点击单元格编辑，行合计

表格子组件代码

js

style

表格参数

组件函数说明

1.组件内方法说明，该表格没有抛出任何方法，不可在父组件使用

2.element show-summary开启合计后每列默认计算，可使用它的自定义合计方法做处理

局部自定义指令

父组件使用

1.可编辑

效果

2.不可编辑

效果

element 表格点击单元格编辑，行合计相关推荐

最新文章

热门文章

element 表格 点击单元格编辑，行合计

表格子组件代码

js

style

表格参数

组件函数说明

1.组件内方法说明，该表格没有抛出任何方法，不可在父组件使用

2.element show-summary开启合计后每列默认计算，可使用它的自定义合计方法做处理

局部自定义指令

父组件使用

1.可编辑

效果

2.不可编辑

效果

element 表格 点击单元格编辑，行合计相关推荐

最新文章

热门文章

element 表格点击单元格编辑，行合计

element 表格点击单元格编辑，行合计相关推荐