场景：

在一个动态遍历渲染表头及内容的el-table表格中，有些数据为空，此时后端将为空的数据返回为null，产品需求将这些为null的数据替换成 “-”并加上tooltip提示。

一般我们的表头是这样遍历的：

<el-table-column :label="item.label" align="center" v-for="item in tableHeader" :key="item.label" :prop="item.value">
</el-table-column>

<script>
export default {
  data(){
     retrun {
       tableHeader = [
          { label: '月累计(亿)', value: 'cur_month_toll' },
          { label: '年累计(亿)', value: 'total_toll' },
          { label: '预算达成率(%)', value: 'targetComplete' },
          { label: '预计完成(亿)', value: 'expect_complete' },
        ]
     }
  }
}
</script>

此时因为每一项的 prop 为 item.value 我们添加插槽时不能使用scope.row.xxx 动态取到每一表列项的数据。

解决方法：

我们可以使用ES6的 [] 语法

如下所示：

<el-table-column :label="item.label" align="center" v-for="item in tableHeader" :key="item.label" :prop="item.value">
    <template slot-scope="scope">
        <div v-if="scope.row[item.value] == null>
            <el-tooltip class="item" effect="dark" content="不适用" placement="top-start">
                    <div>{{ - }}</div>
            </el-tooltip>   
        </div>
        <div v-else>
             {{scope.row[item.value]}}
        </div>
    </template>
</el-table-column>

这样就可以解决啦！