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>