139 lines
2.6 KiB
Vue
139 lines
2.6 KiB
Vue
<template>
|
|
<div class="energyQuantityManualAddTable">
|
|
<el-table
|
|
:data="renderData"
|
|
border
|
|
style="width: 100%"
|
|
:header-cell-style="{
|
|
background: '#F2F4F9',
|
|
color: '#606266',
|
|
}">
|
|
<el-table-column
|
|
prop="tableName"
|
|
label="表名*">
|
|
<template slot-scope="scope">
|
|
<div class="tableInner">
|
|
<el-select
|
|
v-model="scope.row.tableName"
|
|
placeholder="请选择"
|
|
style="width: 100%"
|
|
@change="changeSelect(scope.row, 'tableName')">
|
|
<el-option
|
|
v-for="item in tableNameList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"></el-option>
|
|
</el-select>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="readingQuantity"
|
|
label="抄表数*">
|
|
<template slot-scope="scope">
|
|
<div class="tableInner">
|
|
<el-input-number
|
|
v-model="scope.row.readingQuantity"
|
|
:min="0"
|
|
:max="999999999"
|
|
style="width: 100%"
|
|
:controls="false"
|
|
@change="changeInput(scope.row, 'readingQuantity')"
|
|
:precision="2"></el-input-number>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button
|
|
class="addButton"
|
|
icon="el-icon-plus"
|
|
@click="emitButtonClick">
|
|
新增
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'AddTable',
|
|
props: {
|
|
tableData: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
tableNameList: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
renderData() {
|
|
return this.tableData.map((item, index) => {
|
|
return {
|
|
...item,
|
|
_pageIndex: index + 1,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
emitButtonClick() {
|
|
this.$emit('emitButtonClick');
|
|
},
|
|
changeInput(val1, val2) {
|
|
val1.prop = val2;
|
|
this.$emit('emitFun', val1);
|
|
},
|
|
changeSelect(val1, val2) {
|
|
val1.prop = val2;
|
|
this.$emit('emitFun', val1);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.energyQuantityManualAddTable {
|
|
.el-table .el-table__cell {
|
|
padding: 0;
|
|
height: 35px;
|
|
}
|
|
.addButton {
|
|
width: 100%;
|
|
height: 35px;
|
|
border-top: none;
|
|
color: #0b58ff;
|
|
border-color: #ebeef5;
|
|
border-radius: 0;
|
|
}
|
|
.addButton:hover {
|
|
color: #0b58ff;
|
|
border-color: #ebeef5;
|
|
background-color: #fff;
|
|
}
|
|
.addButton:focus {
|
|
border-color: #ebeef5;
|
|
background-color: #fff;
|
|
}
|
|
.tableInner .el-input__inner {
|
|
border: none;
|
|
padding: 0;
|
|
height: 33px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang='scss'>
|
|
.energyQuantityManualAddTable {
|
|
.el-table .el-table__cell {
|
|
padding: 0;
|
|
height: 35px;
|
|
}
|
|
}
|
|
</style> |