Vue+elementUI table内对vfor下拉框的选项过滤问题

今天在做项目中的一个根据角色筛选可选用户列表的功能犯难了

下面这个是HTML部分的设置

<el-table border :data="tableData"  max-height="400px" style="width: 100%">
    <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
    <el-table-column align="center" prop="roleId" min-width="80" label="角色id"></el-table-column>
    <el-table-column label="操作" align="center" fixed="right" min-width="120" >
        <template>
            <el-select v-model="updateForm.roleId" style="width:80%" clearable placeholder="请选择">
            <el-option v-for="item in userList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
	    </el-select>
        </template>
    </el-table-column>
</el-table>

 下面这个是vue的数据设置

export default {
    data () {
	return {
	// 表格数据
	    tableData: [{roleId: 1}, {roleId: 2}, {roleId: 3}],
        // 用户列表
	    userList: [
		    { id: 1,
		      userName: '管理员',
		      roleId: 1
		    },
		    { id: 2,
		      userName: '李四',
		      roleId: 2
   		    },
		    { id: 3,
		      userName: '张三',
		        roleId: 2
		    },
		    { id: 4,
		      userName: '王五',
		      roleId: 1,
		    }],
	// 更新表单
	    updateNodeForm: { roleId: undefined }
    };
}

想要实现的目的是，表格中的下拉选项内可以根据角色id过滤出合适的用户列表来选择：

例如，表格第一列第一行的roleId为1，那么第二列的下拉框内只想出现管理员和王五的选项，

依此类推，

----------------------------------------

自己摸索过程中，尝试过给v-for加入计算属性/过滤方法， 但问题出在了表格具体行的roleId并没有传递计算属性/过滤方法内，导致无法过滤

目前自己想到另一种方案是在表格渲染时候就给每行算出所需用户列表然后存放在一个全局对象中，仍在尝试中

不知道是否有其他更简单方便的方案，虚心请教

自己刚刚开始接触Vue，个别表述不得当或者不清晰的，也烦请指教

<el-table border :data="tableData"  max-height="400px" style="width: 100%">
    <el-table-column align="center" type="index" width="55" label="序号"></el-table-column>
    <el-table-column align="center" prop="roleId" min-width="80" label="角色id"></el-table-column>
    <el-table-column label="操作" align="center" fixed="right" min-width="120" >
        <template slot-scope="scope">
            <el-select v-model="updateForm.roleId" style="width:80%" clearable placeholder="请选择" 
            <el-option v-for="item in userList" :key="item.id" :label="item.userName" v-if="item.roleId==socpe.row.roleId" :value="item.id"></el-option>
	    </el-select>
        </template>
    </el-table-column>
</el-table>

用这个代码试试呢

红框部分没有闭合。

还有你这个页面的问题是出在哪里呢？

这个是我写的例子你看一下 https://codepen.io/521guyu/pen/mdWBrJo?editors=1010

您的问题已经有小伙伴解答了，请点击【采纳】按钮，采纳帮您提供解决思路的答案，给回答的人一些鼓励哦～～

ps:开通问答VIP，享受5次/月 有问必答服务，了解详情↓↓↓

【电脑端】戳>>>  https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】  戳>>>  https://mall.csdn.net/item/52471?utm_source=1146287632