antd table组件单元格嵌入select选择器

最新推荐文章于 2025-03-07 15:21:30 发布

毛默默不吃鱼

最新推荐文章于 2025-03-07 15:21:30 发布

阅读量3.4k

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/qq_40869401/article/details/122936013

版权

vue 专栏收录该内容

31 篇文章

订阅专栏

这篇博客介绍了如何在Ant Design的Table组件中嵌入Select选择器，提供了详细的代码示例，包括数据源设置、Select组件的配置以及变更事件处理。通过定制表格列的渲染，实现了在单元格内选择的功能，并展示了相关的数据处理方法。

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

antd table组件单元格嵌入select选择器

dom
   <a-table
      :columns='columns'
      :dataSource='columnsList'
      rowKey="key"
      :pagination="false"
      :row-selection="selection"
    >
    <template slot="select" slot-scope="text">
      <div key="select">
        <a-select :showArrow="true" :value='text' placeholder="请选择" :filterOption="false"  @change='changeFun' :dropdownMatchSelectWidth="false">
          <a-icon slot="suffixIcon" type="right"></a-icon>
         <a-select-option v-for="val in selectList" :key="val">
            val
         </a-select-option>
        </a-select>
      </div>

    </template>
    </a-table>
    
     data() {
    return {
      openKeys:['first'],
      collapsed: false,
      list: [],
     clickArr:[],
     columnsList:[
       {
         title:"姓名",
         dataIndex:"name",
         key:"name",
       },
        {
         title:"手机号",
         dataIndex:"tel",
         key:"tel",
         scopedSlots:{customRender:"select"}
       },
     ],
     columns:{},
     selection:{},
     selectList:[]

    };
  },
      created() {
      this.list=[
        {
          "key":"1",
          "title":"AAA",
          "src":"A.png",
          "children":[
            {
              "key":"10",
              "title":"children",
              "src":"A.png",
              "url":"sasdadsd.html"
            },
            {
              "key":"11",
              "title":"children2",
              "src":"b.png",
              "url":"2222sasdadsd.html"
            }
          ]
        }
      ]
      this.getForm()
      this.selectInit()
  },
   selectInit(){
    this.selection={
      columnsWidth:"10px",
      onChange:(selectedRowKeys,selectRows)=>{

      },
      onSelect:(record,selected,selectRows)=>{
        this.selectList=selectRows
      },
      onSelectAll:(selected,selectRows,changeRows)=>{
        this.selectList=selectRows
      }
    }
  
  },
    changeFun(){
      this.selectList[0].select=value
    }
  },