Element: [table-column]:formatter和Scoped slot的冲突问题

Created on 20 Jan 2017 · 6Comments · Source: ElemeFE/element

ElementUI version

1.1.5

OS/Browers version

win7/chrome55

Vue version

2.1.0

Steps to reproduce

<el-table-column prop='level' label='等级' :formatter='formatLevel'> <template scope='scope'> <span :class='scope.row.level == "high" ? "highThreat" : (scope.row.level == "mid" ? "midThreat" : "lowThreat")' class='threat_level'> {{ scope.row.level }} </span> </template> </el-table-column>

formatLevel(row, col) { return row.level == 'high' ? '高' : row.level == 'mid' ? '中' : '低' }

说明：后台给的level数据的值有 high/mid/low，然后用 :formatter 对应地渲染为高/中/低，这个没问题。
但是，再用 Scoped slot 做样式改变时，scope.row.level 的数据还是原始的，不是格式化后的，
这就造成了冲突——不能同时通过 :formatter 和 template改变某列的样式。
ps：我技术较差，可能可以通过其他方法折中，请大家指教一下，谢谢！

Source

ohhoney1

All 6 comments

自己已解决。
在作用域插槽 Scoped slot 中，自定义一个过滤器，不用 :formatter。
自己这个月刚接触vue，继续学习。这issue如果觉得没太大价值，可以关闭。

ohhoney1 on 20 Jan 2017

👍1

Hi,
I speak no chinese, sorry. But I'm wondering what this issue is about. I am trying to attach an event (@click) to rows rendered. I found myself trying to understand the
<template scope="scope"> {{ }} ...

JuanGarassino on 20 Jan 2017

@JuanKraut have you tried the row-click event?

Leopoldthecoder on 22 Jan 2017

👍1

@Leopoldthecoder that did it. A big RTFM to me.

JuanGarassino on 24 Jan 2017

<el-table-column prop="status" label="状态" > <template scope="scope"> <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" close-transition>{{formatterStatus(scope.row.status)}}</el-tag> </template> </el-table-column>

methods: { formatterStatus(val) { return val===1?'正常':'已删除'; } },