税优医疗保险信息表格 - Element UI 表格组件示例

"<el-table\n :data"="!!data ? data.acTaxPiIncomeReportingMedicalInsuranceList : []"\n :row-class-name"="rowAcTaxPiIncomeReportingMedicalInsuranceIndex"\n @selection-change"="handleAcTaxPiIncomeReportingMedicalInsuranceSelectionChange"\n ref"="acTaxPiIncomeReportingMedicalInsurance"\n>\n <el-table-column type"="selection" width"="50" align"="center" />\n <el-table-column label"="序号" align"="center" prop"="index" width"="50" />\n <el-table-column label"="税优识别码" prop"="identificationCode">\n <template slot-scope"="scope">\n <el-input\n v-model"="scope.row.identificationCode"\n placeholder"="请输入税优识别码"\n />\n \n \n <el-table-column label"="保单生效日期" prop"="policyEffectiveDate">\n <template slot-scope"="scope">\n <el-date-picker\n v-model"="scope.row.policyEffectiveDate"\n type"="date"\n placeholder"="选择日期"\n >\n \n \n \n <el-table-column label"="年度保单" prop"="annualPremium">\n <template slot-scope"="scope">\n <el-input\n v-model"="scope.row.annualPremium"\n placeholder"="请输入年度保单"\n />\n \n \n <el-table-column label"="月度保单" prop"="monthlyPremium">\n <template slot-scope"="scope">\n <el-input\n v-model"="scope.row.monthlyPremium"\n placeholder"="请输入月度保单"\n />\n \n \n <el-table-column label"="计算月度保单" prop"="calculatedMonthlyPremium">\n <template slot-scope"="scope">\n <el-input\n v-model"="scope.row.calculatedMonthlyPremium"\n placeholder"="计算月度保单"\n readonly\n />\n \n \n\n\njavascript\n// 在组件的 methods 中添加以下方法\nhandleAcTaxPiIncomeReportingMedicalInsuranceSelectionChange(selection) {\n // 处理选择变化的逻辑\n},\nrowAcTaxPiIncomeReportingMedicalInsuranceIndex(row, index) {\n // 返回行的 class 名称\n},\n\njavascript\n// 在组件的 data 中添加以下属性\ndata: {\n data: null // 初始化 data 为 null\n},\ncomputed: {\n calculatedData() {\n if (this.data) {\n return this.data.acTaxPiIncomeReportingMedicalInsuranceList.map(item => {\n return {\n ...item,\n calculatedMonthlyPremium: item.annualPremium / 12 // 计算月度保单\n };\n });\n } else {\n return [];\n }\n }\n}\n\njavascript\n// 在组件的 watch 中监听数据变化\nwatch: {\n data: {\n handler() {\n this.$nextTick(() => {\n this.$refs.acTaxPiIncomeReportingMedicalInsurance.setCurrentRow(null);\n });\n },\n deep: true\n }\n}\n\njavascript\n// 在组件的 mounted 中初始化数据\nmounted() {\n this.data = {\n acTaxPiIncomeReportingMedicalInsuranceList: [] // 初始化为空数组\n };\n}\n```