el-table表格，新增下列选项处理并数据展示

sunshine 覃糖

于 2021-12-11 15:01:42 发布

阅读量819

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/tan_xiao_tan/article/details/121873561

版权

本文介绍了在使用Vue.js和ElementUI开发中，如何处理el-table表格在新增数据时下拉选项的显示问题。重点在于确保在编辑和非编辑状态下，下拉选项能正确展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当新增数据时，如何对下拉选项值在编辑和非编辑状态时正确展示数据？
处理方案如下：

<template>
  <div style="width: 1200px">
    <el-button @click="add">新增</el-button>
    <el-form ref="regionTable" :model="regionForm" label-width="80px">
      <el-table :data="regionForm.regionTable" style="width: 100%">
        <el-table-column prop="region" label="活动区域">
          <template slot-scope="{ row, $index }">
            <el-form-item v-if="currentIndex === $index">
              <el-select v-model="row.region" placeholder="请选择">
                <el-option
                  v-for="item in originOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                  >{
   {
    item.label }}</el-option
                >
              </el-select>
            </el-form-item>
            <span v-else>{
   {
    row

最低0.47元/天解锁文章