el-table el-table-column 嵌入 el-select等插件 数据更新渲染问题

79 阅读1分钟

今天用remote的时候遇到了这个问题,试了一下发现,只要写在template里就可以正常使用,即使用不上scope。

// 数据已经更新了,但是不会更新渲染options,选择选项也一样,数据已经更新了,选择器不会更新渲染,拖动一下窗口宽度可以触发重新渲染。
<el-table-column>
    <el-select
      remote
      filterable
      placeholder="请输入商品名称"
      :remote-method="searchProduct"
      :loading="loading"
      value-key="product_id"
      @change="addProduct"
      style="width: 260px"
    >
      <el-option
        v-for="item in productOptions"
        :key="item.product_id"
        :label="item.body"
        :value="item"
      ></el-option>
    </el-select>
</el-table-column>

可以更新

//数据更新了,但是没有正确渲染
<el-table-column>
    <template slot-scope="{ row }">
        <el-select
          remote
          filterable
          placeholder="请输入商品名称"
          :remote-method="searchProduct"
          :loading="loading"
          value-key="product_id"
          @change="addProduct"
          style="width: 260px"
        >
          <el-option
            v-for="item in productOptions"
            :key="item.product_id"
            :label="item.body"
            :value="item"
          ></el-option>
        </el-select>
    </template>
</el-table-column>