Vue3-admin-template的表格合计计算

简介: Vue3-admin-template的表格合计计算

直接上代码:

 <el-table
          :data="lists"
          style="width: 100%"
          max-height="500"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          show-summary
          :summary-method="getSummaries"
          class="center-table"
        >
          <el-table-column fixed="left" prop="id" label="序号" />
          <el-table-column fixed="left" prop="name" label="姓名" width="90" />
          <el-table-column label="工资所属日期" width="120">
            <span>{{ dates }}</span>
          </el-table-column>
          <el-table-column label="公共性质" width="100">
            <template #default="scope">
              <span>{{
                scope.row.layout == 1 ? '长期派遣' : scope.row.layout == 2 ? '短期派遣' : '学员'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zw" label="职务" width="100" />
          <el-table-column prop="title" label="薪水等级" width="100" />
          <el-table-column label="薪资待遇标准" width="300">
            <el-table-column prop="money" label="岗位工资" width="100" />
            <el-table-column prop="safe" label="安全质量奖金" width="100" />
            <el-table-column prop="station" label="岗位津贴" width="100" />
            <el-table-column prop="performance" label="绩效奖金" width="100" />
          </el-table-column>
          <el-table-column prop="total_day" label="应出勤天数" width="120" />
          <el-table-column prop="standard" label="实际出勤天数" width="120" />
          <el-table-column prop="money" label="岗位工资" width="100" />
          <el-table-column prop="safe" label="安全质量奖金" width="120" />
          <el-table-column prop="station" label="岗位津贴" width="100" />
          <el-table-column prop="performance" label="绩效奖金" width="100" />
          <el-table-column label="证书补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.crt_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="通讯补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.tel_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="电脑补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.comp_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="夜班补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.night_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="加班补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.overtime_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="误餐补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.delay_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="租房补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.house_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="高温补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.hot_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="取暖补贴" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.toast_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="外出施工补贴" width="120">
            <template #default="scope">
              <input type="number" v-model="scope.row.egress_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="奖金" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.bonus" />
            </template>
          </el-table-column>
          <el-table-column label="其他补助" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.other_allowance" />
            </template>
          </el-table-column>
          <el-table-column label="扣款" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.deduct" />
            </template>
          </el-table-column>
          <el-table-column prop="yf_subtotal" label="应发小计" width="100"></el-table-column>
          <el-table-column label="个人社保" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.gr_security" />
            </template>
          </el-table-column>
          <el-table-column label="个税" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.individual" />
            </template>
          </el-table-column>
          <el-table-column prop="sf_subtotal" label="实发小计" width="100"></el-table-column>
          <el-table-column label="单位社保" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.dw_security" />
            </template>
          </el-table-column>
          <el-table-column label="管理费" width="100">
            <template #default="scope">
              <input type="number" v-model="scope.row.management" />
            </template>
          </el-table-column>
          <el-table-column prop="tel" label="电话" width="140"></el-table-column>
          <el-table-column prop="idcard" label="身份证号" width="180"></el-table-column>
          <el-table-column prop="bank_card" label="银行卡号" width="220"></el-table-column>
          <el-table-column
            fixed="right"
            prop="totalprice"
            label="合计金额"
            width="100"
          ></el-table-column>
        </el-table>

里面用到两个属性:

   show-summary

  :summary-method="getSummaries"

第二步:逻辑部分

const 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 ((index >= 6 && index < 10) || (index >= 12 && index <= 34) || index == 38) {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        sums[index] = sums[index].toFixed(2);
        // sums[index] += ' 元';
      } else {
        sums[index] = '';
      }
    });
 
    return sums;
  };


相关文章
|
6月前
|
JavaScript
vue给table组件添加合计
vue给table组件添加合计
151 0
|
缓存 JavaScript 前端开发
Vue语法--完成购物车案例
Vue语法--完成购物车案例
70 0
|
JavaScript
Vue Antdv 列表(table、list)自定义空数据状态UI
Vue Antdv 列表(table、list)自定义空数据状态UI
597 0
|
JavaScript 前端开发
VUE element-ui之table表格自增序号(前端实现)
VUE element-ui之table表格自增序号(前端实现)
1458 0
|
3月前
Vue2表格(Table)
这是一个基于 Vue3 的表格组件,提供了灵活的数据展示与分页功能。主要接收表格列配置 `columns`、数据源 `dataSource`、分页器配置 `pagination` 等参数,并支持加载状态显示及单页隐藏分页器等特性。组件内置了加载中组件 `Spin` 和分页组件 `Pagination`,样式参考 ant-design。使用时需在目标页面引入组件并设置相关属性即可实现丰富的表格展示效果。
212 1
Vue2表格(Table)
|
19天前
|
JavaScript 前端开发 数据处理
Vue导出el-table表格为Excel文件的两种方式
Vue导出el-table表格为Excel文件的两种方式
|
3月前
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
Vue3表格(Table)
|
4月前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
469 4
|
6月前
Vue-admin-template 的表格获取下标
Vue-admin-template 的表格获取下标
|
6月前
Vue3-admin-template 导入模板功能
Vue3-admin-template 导入模板功能