Element: [Bug Report] `el-table-column` and `v-for` are used together, `v-if` and `slot-scope` together, and do not display basic information

[hezhongfeng]

Element UI version

2.0.9

OS/Browsers version

windows,chrome63

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/hezhongfeng/32ry1ywL/3/

Steps to reproduce

应该显示基础的信息，但是并没有出现

What is Expected?

一般的信息显示出来

What is actually happening?

不显示一般的信息，只显示slot-scope的

[element-bot]

Translation of this issue:

Element UI version

2.0.9

OS/Browsers version

Windows, chrome63

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/hezhongfeng/32ry1ywL/3/

Steps to reproduce

The information of the base should be displayed, but it does not appear

What is Expected?

General information is shown

What is actually happening?

Do not display general information, only slot-scope

[hezhongfeng]

可以通过

      <div slot-scope="scope">
        <div class="biz-customcol" v-if="header.multipleRow">
          <i class="el-icon-time"></i>
          <img src="../../assets/images/headicon.png" alt="">
          <div class="biz-two-row">
            <span style="margin-left: 10px">{{ scope.row[header.prop] }}</span>
            <span style="margin-left: 10px">{{ scope.row[header.prop] }}</span>
          </div>
        </div>
        <div v-if="!header.multipleRow">
          <span style="margin-left: 10px">{{ scope.row[header.prop] }}</span>
        </div>
      </div>

实现和预期一样的效果，但是多选框没了，这个比较头疼~
这里应该是说我的这种在slot-scope="scope上使用v-if是没有意义的，我得好好理解下了。

[hezhongfeng]

我感觉我的做法是正常的。
但好像没人遇到过？

[hezhongfeng]

我目前觉得问题应该是出现在slot-scope="scope和v-if一起使用上
无论这个v-if的结果是什么，都会把默认的替换掉
但是又不能使用div包裹一下slot-scope，这样会导致自定义部分undefined

[QingWei-Li]

根据文档提示 v-for 和 v-if 是可以一起用的，并且 v-for 的优先级高于 v-if https://vuejs.org/v2/guide/list.html#v-for-with-v-if

例如

new Vue({
    el: '#app',

  template: `
  <ul>
    <li v-for="item in list" :key="item.data" v-if="item.disable">
      disable: {{ item.data }}
    </li>
    <li v-else>{{ item.data }}</li>
  </ul>
  `,

  data: () => ({
    list: [
        {
        data: 1
      },
      {
        disable: true,
        data: 2
      },
      {
        data: 3
      }
    ]
  })
})

所以可以将你的 demo 改写成如下

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column v-if="header.multipleRow" v-for="(header,index) of tableHeader" :prop="header.prop" :label="header.label" :width="header.width" :key="index">
        <div slot-scope="scope">
          <div class="biz-customcol">
            <i class="el-icon-time"></i>
            <div class="biz-two-row">
              <span style="margin-left: 10px">{{ scope.row[header.prop] }}</span>
              <span style="margin-left: 10px">{{ scope.row[header.prop] }}</span>
            </div>
          </div>
        </div>
      </el-table-column>
      <el-table-column v-else :prop="header.prop" :label="header.label"></el-table-column>
    </el-table>

online demo