<!-- 使用示例 -->
|
<template>
|
<div>
|
<!-- 基本使用 -->
|
<ProductionDetailsTable v-model="tableData" />
|
|
<!-- 自定义配置 -->
|
<ProductionDetailsTable
|
v-model="tableData"
|
:border="true"
|
:show-operations="false"
|
:auto-calculate="false"
|
@input-change="handleChange"
|
@delete-row="handleDelete"
|
/>
|
|
<!-- 操作按钮 -->
|
<el-row :gutter="10" style="margin-top: 20px;">
|
<el-col :span="4">
|
<el-button type="primary" @click="addRow">新增行</el-button>
|
</el-col>
|
<el-col :span="4">
|
<el-button type="danger" @click="clearData">清空数据</el-button>
|
</el-col>
|
<el-col :span="4">
|
<el-button type="success" @click="submitData">提交数据</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import ProductionDetailsTable from './ProductionDetailsTable.vue'
|
|
// 表格数据
|
const tableData = ref([
|
{
|
coalType: '动力煤',
|
calorificValue: '5000',
|
productionQuantity: '100',
|
laborCost: '1000',
|
energyCost: '800',
|
equipmentDepreciation: '500',
|
purchasePrice: '2000',
|
totalCost: '4300'
|
}
|
])
|
|
// 获取组件实例引用
|
const tableRef = ref(null)
|
|
// 事件处理
|
const handleChange = (data) => {
|
console.log('数据变化:', data)
|
}
|
|
const handleDelete = (index) => {
|
console.log('删除行:', index)
|
}
|
|
// 操作方法
|
const addRow = () => {
|
if (tableRef.value) {
|
tableRef.value.addRow({
|
coalType: '新煤种',
|
calorificValue: '0',
|
productionQuantity: '0',
|
laborCost: '0',
|
energyCost: '0',
|
equipmentDepreciation: '0',
|
purchasePrice: '0',
|
totalCost: '0'
|
})
|
}
|
}
|
|
const clearData = () => {
|
if (tableRef.value) {
|
tableRef.value.clearData()
|
}
|
}
|
|
const submitData = () => {
|
console.log('提交的数据:', tableData.value)
|
// 这里可以调用API提交数据
|
}
|
</script>
|
