<el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="sex" label="性別" width="180" :formatter="formatSex"></el-table-column> <el-table-column prop="address" label="出生地" :formatter="formatAddress"></el-table-column> </el-table> <...
一、el-table的formatter (比较适合单一表) 1、结构 2、js 二、el-table的formatter(多表多字段) 2、数据 3、js 三、upload...
正常情况下,表格展示的都是我们传给后台的数据,但是也有特殊情况,传的是枚举值,后端给到前端的也是枚举值,这样就需要我们去做处理了。这里可以结合 formatter 函数。 <el-table-columnprop="processField"label="时间字段":formatter="sourceFormat"></el-table-column>或者<el-table-columnprop="processField"labe...
el-table中的formatter用于格式化表格中的内容。这个属性可以接收一个函数,这个函数接受两个参数,第一个参数是行数据,第二个参数是行数据的索引。函数需要返回一个字符串,这个字符串将被插入到表格中的对应行。如果formatter的返回值是undefined,那么将不会显示任何内容。
<el-table-column prop="address"label="地址"></el-table-column> </el-table> </template> <script>exportdefault{ data() {return{ tableData3: [{ id:'1', date:'2016-05-03', name:'王小虎', address:'上海市普陀区金沙江路 1518 弄', ...
</el-table> 然后给此列设置一个formatter :formatter= "czyFormat" 1. 在对应的格式化方法中 // 操作员字典翻译 czyFormat(row, column) { var name = ""; this.czyOptions.forEach(function (item, index) { if (row.czy == item.userId) { name = item.userName; } }); return name; }, ...
如果是类似于状态等这样的键值对映射的话除了在后台进行关联表进行查询,还可以在前端使用el-table的 formatter进行格式化显示。 首先在页面上添加操作员此列 <el-table v-loading="loading":data="bcbdlsList"@selection-change="handleSelectionChange">
二.el-table formatter,传入 Id 显示name <el-table-column prop="merchantName" label="商户" :formatter="getName" ></el-table-column> getName(e){ return this.alignOptions.find(item => item.id == e.merchantId).merchantName }, 三.显示不同状态的页面 ...
</el-table-column> // methods中 formatParam(row, column, cellValue, index) { // row 是当前行的数据 {sex: 1, name: "zhangsan"} // colunm 当前表格单元的属性,常用的比如 label:性别, property:sex, // cellValue 当前的数据 1 // index 当前所在第几条数据 0 ...