vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1
2023-09-27 14:26:17 时间
1.oninput 事件在用户输入时触发;
<template>
<div class="test_box">
<p>hell,你好</p>
<p>encodeURI编码后转码的路由参数内容----<span style="color: red">({{routerParmas}})</span></p>
<div class="table_box">
<el-table :data="sheetTableData" border style="width: 100%" :summary-method="getSummaries" show-summary>
<el-table-column prop="years" label="年度" align='center' sortable>
<template slot-scope="scope">
<el-input class="txt_ct" v-model="scope.row.years" placeholder="请输入" disabled></el-input>
</template>
</el-table-column>
<el-table-column prop="firstSeason" label="第一季度统计" align='center'>
<template slot-scope="scope">
<el-input class="txt_ct" v-model="scope.row.firstSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="secondSeason" label="第二季度统计" align='center'>
<template slot-scope="scope">
<el-input class="txt_ct" v-model="scope.row.secondSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="thirdSeason" label="第三季度统计" align='center'>
<template slot-scope="scope">
<el-input class="txt_ct" v-model="scope.row.thirdSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
</template>
</el-table-column>
<el-table-column prop="fourthSeason" label="第四季度统计" align='center'>
<template slot-scope="scope">
<el-input class="txt_ct" v-model="scope.row.fourthSeason" placeholder="请输入" oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')" :disabled="isEgdit" v-on:input="changeValue"></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" align='center'>
<template slot-scope="scope">
<el-button type="primary" size="small" @click='addData' icon="el-icon-plus" circle></el-button>
<el-button v-if="scope.$index == sheetTableData.length-1 || scope.$index == 0" @click.native.prevent="deleteData(scope.$index,sheetTableData)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
</template>
</el-table-column>
<!-- 暂无数据 -->
<div slot="empty" v-if="!sheetTableData.length" style="padding:20px;">
<div style="margin-top: 10px">暂无数据
<span>,请 <el-button type="text" @click="dialogVisible = true">新增</el-button></span>
</div>
</div>
</el-table>
<!-- 弹窗 -->
<el-dialog title="请选择起始年份/截止年份" :visible.sync="dialogVisible">
<div style="display: flex;align-items: center;justify-content: center;">
<div class="block">
<el-date-picker v-model="startYear" type="year" placeholder="起始年份" value-format="yyyy">
</el-date-picker>
</div>
<div class="block">
<p style="padding:10px;">至</p>
</div>
<div class="block">
<el-date-picker v-model="endYear" type="year" placeholder="截止年份" value-format="yyyy">
</el-date-picker>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sureAddData">确 定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isEgdit: false,//是否可编辑
sheetTableData: [],//数据
startYear: '',//起始年份
endYear: '',//截止年份
dialogVisible: false,//弹窗是否显示
routerParmas: decodeURI(decodeURI(this.$route.query.goodName)), //路由编码参数解码
};
},
methods: {
//新增数据
addData() {
let item = {
"id": null,
"years": Number(this.sheetTableData[this.sheetTableData.length - 1].years) + 1,
"firstSeason": null,
"secondSeason": null,
"thirdSeason": null,
"fourthSeason": null
}
this.sheetTableData.push(item)
},
//确认依据起始年份/截止年份 添加数据
sureAddData() {
let yearDiff = Number(this.endYear - this.startYear)
//console.log(yearDiff, 'yearDiff', this.endYear, 'timeEnd', this.startYear, 'timeStart')
if (yearDiff > 0) {
for (let i = 0; i <= yearDiff; i++) {
this.sheetTableData.push({
"id": null,
"years": Number(this.startYear) + Number(i),
"firstSeason": null,
"secondSeason": null,
"thirdSeason": null,
"fourthSeason": null,
})
}
} else {
this.$eleMessage('截止年份应大于起始年份', 'error', 500)
}
this.dialogVisible = false;
},
//删除
deleteData(index, list) {
list.splice(index, 1);
},
//合计---Element ui自带合计功能还是蛮好用的 (前提是dom中的prop属性必须要有)
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '';
} else {
sums[index] = '';
}
});
return sums;
},
changeValue(){
//1、oninput事件在value改变时触发,实时的即每增加或删除一个字符就会触发,然而通过js改变value时,却不会触发。
//2、onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发。
console.log('输入时候可以做些什么事情')
}
}
}
</script>
<style scoped>
</style>
相关文章
- 【Vue】路由组件中失去焦点和获得焦点的两个事件
- 关于Vue项目npm操作中npm run serve或npm run dev报错以及二者区别
- Vue - cli3 脚手架搭建项目步骤流程(windows)
- (30)打鸡儿教你Vue.js
- Vue组件定义
- 关于vue的语法规则检测报错问题
- Vue响应式原理
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue文档摘录三:全局 API
- 在控制台拿到vue的实例
- vue-cli安装webpack项目及初始配置
- vue项目刷新当前页面的几种解决方案对比:如何优雅的强制重新渲染子组件
- vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求
- vue组件间高级通信
- Vue项目报错:Parsing error: Unexpected reserved word ‘await‘ 解决方法
- spring boot + vue + element-ui全栈开发入门——windows开发环境
- Vue开发实例(01)之环境搭建nodejs与运行第一个Vue项目
- VUE 爬坑之旅 -- 用 ES6 语法写一个工具类,并全局引用
- vue App项目 首页
- vue 外卖app (1) 项目目录介绍
- vue项目无法删除