element ui 的表格下拉框使用虚拟渲染

Element UI 表格的下拉框使用虚拟渲染可以提高表格的性能，避免渲染大量的 DOM 元素，提高用户体验。具体实现方式如下：

1. 在表格列中使用 `slot-scope` 插槽来定义下拉框组件，如 `el-select`。
2. 在组件中使用 `v-model` 绑定数据，如 `scope.row.goods_id`。
3. 在 `el-option` 中使用 `v-for` 循环遍历下拉框选项，如 `merchandiseNameData`。
4. 添加 `filterable` 和 `clearable` 属性来增加下拉框的可搜索和可清空性。
5. 在 `el-table` 组件中添加 `v-loading` 属性来展示表格加载状态。
6. 使用 `v-slot` 来定义虚拟列表的渲染范围，如 `v-slot="{row}"`。
7. 在组件中使用 `row` 对象来获取当前行的数据，如 `row.goods_id`。

具体代码示例如下：

<el-table
  :data="tableData"
  :height="tableHeight"
  :row-height="tableRowHeight"
  v-loading="tableLoading"
  class="table-demo"
>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column label="Goods ID">
    <template slot-scope="scope">
      <el-select
        v-model.lazy="scope.row.goods_id"
        clearable
        filterable
        :virtual-list="virtualList"
        :virtual="true"
        @visible-change="handleVisibleChange"
      >
        <template v-slot="{row}">
          <el-option
            v-for="goods in merchandiseNameData"
            :key="goods.data"
            :label="goods.num"
            :value="goods.data"
            :disabled="goods.disabled"
          ></el-option>
        </template>
      </el-select>
    </template>
  </el-table-column>
</el-table>

其中，`virtualList` 变量代表虚拟列表的可见行数，`handleVisibleChange` 方法用来监听下拉框的可见性变化。