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
}
},