element-plus table合并列、合計行、表格填報添加驗證的示例

更新時間：2025年06月28日 10:43:59 作者：小云小白

這篇文章主要介紹了element-plus table合并列、合計行、表格填報添加驗證的示例,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1 說明

1、table 合并列：el-table 添加 span-method 方法，方法（mergeCells ）內(nèi)可以寫死指定的合并列

2、table 添加合計行：el-table 添加 :summary-method 方法，方法（getSummaries ）內(nèi)可以寫死求和列
，這里更推薦修改方法：使用 "decimal.js" 計算，因為js 小數(shù)計算不精準

3、表格填報添加驗證：
1）添加el-from 包裹表格，并且添加model、rules，注意 el-from、table 綁定的數(shù)據(jù)要有關(guān)系；
2）el-form-item 綁定 :prop="`itemList.${scope.$index}.planAmount`" :rules="rulesTab.planAmount">
3）添加 style 美化樣式，見模板，美化后的樣式如下圖

2 方法模板

<template>
<el-row>
	<el-col :span="24" class="blocker contenter">
	  <div class="d-flex" style="margin-bottom: 10px;">
		<div style="font-weight: bold;">列表</div>
		<div style="margin-left: auto;">
		  <el-button class="tool-btn" type="primary" icon="Edit" @click="submitForm">保存</el-button>
		</div>
	  </div>
	  <el-form ref="tableDataFromRef" :model="formData" :rules="rulesTab" class="tableDataFrom">
		<el-table
			:data="formData.itemList"
			:span-method="mergeCells"
			:summary-method="getSummaries"
			border
			height="66vh"
			style="width: 100%; margin-top: 20px"
			:row-style="{'height':'40px','font-size':'14px'}"
			:cell-style="{'padding':'0 5px'}"
		>
		  <el-table-column type="index" label="序號" width="70" align="center"/>
		  <el-table-column prop="feeLv2Name" label="費用項目" width="170" align="center"/>
		  <el-table-column :label="`${queryParamFormData.planMonth?.substring(5,8)}月`" align="center">
			<el-table-column prop="planAmount" label="計劃金額" width="130" align="right">
			  <template #default="scope">
				<el-form-item :prop="`itemList.${scope.$index}.planAmount`" :rules="rulesTab.planAmount">
				  <el-input-number v-model="scope.row.planAmount" precision="2" :controls="false"
								   :disabled="!isEditing"
								   style="width: 115px"/>
				</el-form-item>
			  </template>
			</el-table-column>
		  </el-table-column>
		</el-table>
	  </el-form>
	</el-col>
</el-row>
</template>
<script setup>
import {ref, onMounted, watch} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
......
const tableDataFromRef = ref()
const loading = ref(false)
// 是否正在編輯
const isEditing = ref(false)
// 表單信息
const formData = ref({id: null, itemList: [], status: null})
// 表單的驗證規(guī)則
const rulesTab = ref({
  planAmount: [
    {required: true, message: "計劃金額不能為空", trigger: "blur"}
  ]
})
// 合并單元格
const mergeCells = ({row, column, rowIndex}) => {
  const mergeKeys = ['feeLv1Name', 'feeLv2Name', 'feeLv3Name']
  const prop = column.property
  const data = formData.value.itemList
  if (!mergeKeys.includes(prop)) {
    return {rowspan: 1, colspan: 1}
  }
  // 不是第0行且和上一行值一樣，則隱藏
  if (rowIndex > 0 && data[rowIndex][prop] === data[rowIndex - 1][prop]) {
    return {rowspan: 0, colspan: 0}
  }
  // 統(tǒng)計與當前行值相同的后續(xù)行數(shù)（僅限相鄰）
  let rowspan = 1
  for (let i = rowIndex + 1; i < data.length; i++) {
    if (data[i][prop] === row[prop]) {
      rowspan++
    } else {
      break
    }
  }
  return {rowspan, colspan: 1}
}
// 添加合計行
const getSummaries = ({columns, data}) => {
  const sums = []
  const sumKeys = ['planAmount']  // 指定需要求和的字段
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', {}, ['合計'])
      return
    }
    const property = column.property
    if (!sumKeys.includes(property)) {
      sums[index] = ''  // 非指定列不顯示或?qū)?'N/A'
      return
    }
    const values = data.map(item => Number(item[property]))
    if (!values.every(value => Number.isNaN(value))) {
      const total = values.reduce((sum, val) => {
        return Number.isNaN(val) ? sum : sum + val
      }, 0)
      sums[index] = `${total.toFixed(2)}`
    } else {
      sums[index] = 'N/A'
    }
  })
  return sums
}
// 保存行信息
const submitForm = async () => {
  await tableDataFromRef.value.validate().then(() => {
    ...保存方法
  }).catch(error => {
    ElMessage.warning("請不要填寫空值！");
  })
}
</script>
<style lang="scss" scoped>
// 調(diào)整表格中的樣式，讓提示美觀
.tableDataFrom {
  .el-form-item {
    margin-bottom: 0;
    :deep(.el-input__wrapper) {
      background: transparent;
      padding: 0 5px;
    }
    :deep(.el-form-item__error) {
      z-index: -1;
      top: 0;
    }
  }
}
</style>

到此這篇關(guān)于element-plus table合并列、合計行、表格填報添加驗證的示例的文章就介紹到這了,更多相關(guān)element-plus table表格內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: