el-table组件内使用el-select下拉框动态循环展示内容

2种写法：

el-select : 

优点：样式好看，采用v-model绑定可以实现修改直接保存

缺点：对于过多的option下拉选项，会造成表格渲染性能慢的问题

//表格column
{
    label: '问题类型',
    prop: 'problemType',
    minWidth: '180',
    render: (h,scope)=>{
        return (
            <el-select
                v-model={ scope.row.problemType }
                placeholder="请选择" multiple collapse-tags
                onChange={ ()=>this.setWarnOperationWeekProblemSave(scope.row) }>
                { that.problemTypeOptions.map(item=>{
                    return <el-option label={ item } value={ item } key={ item+scope.row.index }></el-option>
                }) }
            </el-select>
        )
    }
},

//实时保存

async setWarnOperationWeekProblemSave(row) {
    let params={
        problemType: xxx,
        id: row.id
    }
    const res=await api.xxxx(params)
    if(res.success){
        xxxxx
    }else{
        this.$message.error(`${ res.message }`)
    }
},

 

select:
优点：页面渲染快
缺点：样式比较丑，点击下拉框修改值需要写方法指定位置修改

//表格column
{
                    label: '下发类型',prop: 'issueType',minWidth: 200,fixed: 'left',
                    render: (h,scope)=>{
                        return (
                            <select onChange={ (vm)=>{that.updateTableCol(vm,scope.$index,scope.column.property)} }>
                                <option value="1" selected={ scope.row[scope.column.property]==1 ? true : false }>部分下发(可选中心,管理区)</option>
                                <option value="2" selected={ scope.row[scope.column.property]==2 ? true : false }>全部下发(不支持管理区)</option>
                                <option value="3" selected={ scope.row[scope.column.property]==3 ? true : false }>不下发(不支持中心)</option>
                                <option value="4" selected={ scope.row[scope.column.property]==4 ? true : false }>禁止下发</option>
                            </select>
                        )
                    }
                },
                {
                    label: '计算规则',
                    prop: 'countTypeChecked',
                    minWidth: '180',
                    render: (h,scope)=>{
                        return (
                            //表格动态下拉框
                            <select onChange={ (vm)=>{that.updateTableCol(vm,scope.$index,scope.column.property)} }>
                                { that.countTypeOptions.map((item,index)=>{
                                    return <option value={ scope.row.countType[index].code+'' }
                                                   selected={ scope.row[scope.column.property]==scope.row.countType[index].code ? true : false }
                                                   disabled={ scope.row.countType[index].disable }>
                                        { item.name }
                                    </option>
                                }) }
                            </select>
                        )
                    }
                }

//修改表格中的select绑定的值

this.$refs.manageTable.tableData[index][prop]=parseInt(val.target.value)