vue el-table数据转换,使用<template slot-scope="scope">对表格赋值时,formatter 不起作用

在 Vue 的 Element UI 中,通常使用 formatter 函数来格式化 el-table 的数据显示。然而,在项目实践中遇到一个问题,当通过 <template slot-scope="scope"> 对表格数据赋值时,formatter 不再生效。本文将探讨这个问题的原因及提供解决方案,展示最终实现的正确效果。

一般在 table 表格中,对数据进行转换是通过如下形式:

<el-table-column
      prop="deptType"
      label="部门类型"
      :formatter="formatDepartType" 
      >
</el-table-column>
 methods: {
   
   
       formatDepartType(row
<template> <div class="app-container"> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="账号"> <el-input placeholder="账号" v-model="queryParams.account"></el-input> </el-form-item> <el-form-item label="昵称"> <el-input placeholder="昵称" v-model="queryParams.name"></el-input> </el-form-item> <el-form-item label="状态"> <el-select placeholder="状态" v-model="queryParams.status"> <el-option label="启用" value="1"></el-option> <el-option label="禁用" value="0"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> <el-table :data="tableData" border height="400" style="width: 100%"> <el-table-column prop="account" label="账号" > </el-table-column> <el-table-column prop="name" label="姓名" > </el-table-column> <el-table-column prop="password" label="密码" > </el-table-column> <el-table-column prop="balance" label="余额" > </el-table-column> <el-table-column prop="status" label="状态" > </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> </div> </template> <script> import { listUser } from '@/api/user'; export default{ data(){ return{ tableData:[], total:0, queryParams:{ pageNum:1, pageSize:10 } } }, created(){ this.getlist() }, methods:{ getlist(){ listUser(this.queryParams).then(res =>{ console.log(res) this.tableData = res.rows this.total = res.total }) } } } </script>代码修正
最新发布
08-28
<el-dialog :close-on-click-modal=“false” :title=“form && form.id ? ‘查看白名单’ : ‘新增白名单’” :visible.sync=“dialogVisible” width=“800px” @close=“handleCancel” > <el-select v-model=“form.signerId” placeholder=“人员工号或姓名” clearable filterable remote :remote-method=“searchStaff” :loading=“loadingStaff” style=“width: 240px” @change=“handleStaffChange” > <el-form-item label="免学习产品" required></el-form-item> <!-- 学习产品选择 --> <el-form-item label="保司" required> <el-radio-group v-model="form.insuranceCompanyScope" @change="handleScopeChange($event, 1)" > <el-radio :label="1">全部</el-radio> <el-radio :label="2">部分</el-radio> </el-radio-group> </el-form-item> <!-- 部分产品选择区域 --> <el-form-item label="" v-if="form.insuranceCompanyScope =='2'"> <el-select multiple collapse-tags v-model="form.insuranceCompanyIds" placeholder="请选择" style="width: 280px" filterable > <el-option v-for="item in insuranceList" :key="item.id" :label="`${item.name}(${item.areaInfo})`" :value="item.id" /> </el-select> </el-form-item> <el-form-item label="产品" required v-if="form.insuranceCompanyScope =='2'"> <el-radio-group v-model="form.productScope" @change="handleScopeChange($event, 2)" > <el-radio :label="1">全部</el-radio> <el-radio :label="2">部分</el-radio> </el-radio-group> </el-form-item> <el-form-item v-if="form.productScope=='2' &&form.insuranceCompanyScope =='2'"> <el-select v-model="form.product" placeholder="请输入产品编码和名称" clearable filterable remote :remote-method="searchProduct" :loading="loadingProduct" style="width: 240px" > <el-option v-for="sitem in productOptions" :key="sitem.productId" :value="sitem.productId" :label="`${sitem.productName} (${sitem.productId})`" /> </el-select> <el-button type="primary" size="mini" @click="addProduct"> 新增 </el-button> </el-form-item> <!-- 已选产品列表 --> <div v-if="form.productScope=='2' &&form.insuranceCompanyScope =='2'"> <el-table :data="selectedProducts" border style="width: 100%; margin-top: 10px" :show-header="selectedProducts.length > 0 && form.productScope=='2'" > <el-table-column prop="productId" label="产品编码"></el-table-column> <el-table-column prop="productName" label="产品名称" ></el-table-column> <el-table-column prop="productSimpleChineseName" label="简体中文名称" ></el-table-column> <el-table-column prop="productEnglishName" label="英文名称" ></el-table-column> <el-table-column prop="insuranceCompanyName" label="保司"></el-table-column> <el-table-column prop="insuranceCompanyArea" label="地区"></el-table-column> <el-table-column prop="insType" label="险种" :formatter="(row) => (row.insType == '1' ? '长险' : '短险' || '-')" ></el-table-column> <el-table-column prop="productType" label="分类" ></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" class="delete-btn" @click="deleteProduct(scope.$index)" > 删除 </el-button> </template> </el-table-column> </el-table> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="handleCancel">取消</el-button> <el-button type="primary" @click="handleSave">保存</el-button> </div> </el-dialog>提交校验
08-20
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值