包兄 2021-05-28 16:33 采纳率: 50%
浏览 667
已结题

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,个别表述不得当或者不清晰的,也烦请指教

  • 写回答

4条回答 默认 最新

  • 易书生 2021-05-28 16:38
    关注
    <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>

    用这个代码试试呢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 8月13日

悬赏问题

  • ¥50 unitywebrequest分段下载导致报错,如何解决?
  • ¥15 错误使用 gretna_GUI_PreprocessInterface>RunBtn_Callback
  • ¥15 WPF如何用Chart绘画出Y轴的左边数据
  • ¥15 pycharm无法查看内置代码
  • ¥15 跑hls xfopencv的例程standalone_hls_axi_example出的错误,csim没问题,c synthesis出的错误
  • ¥15 sqlserver update语句逐行生效
  • ¥20 Windows10系统命令行调用
  • ¥15 php环境如何实现国密SM2相关功能
  • ¥15 关于#单片机#的问题:K210 例程里面提示我iomem.h: No such file or directory
  • ¥15 LSPI算法的大问题