vue + element ui时 调用toggleRowSelection不生效

  1. 使用vuex存当前row,getters取row
  2. 去其它组件回来时toggleRowSelection(row, true)不生效
  3. 应该是函数return 取值形成了闭包,在操作页面遍历找到对应row,重新调用即可!

主要代码

 computed: {
    getHomePageRow () {
      return this.$store.getters.getHomePageRow
    }
  },
 watch:{
    list(){
      if(this.getHomePageRow.length){
      // 避免有分页时无效果
        this.$nextTick(()=>{
          const row = this.list.find((item)=>item.id === this.getHomePageRow[0].id)
          this.$refs.multipleTable.toggleRowSelection(row,true);
        })
      }
    }
  },
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue是一个流行的前端JavaScript框架,而Element UI是一个基于Vue的桌面端UI组件库。Vue + Element UI可以帮助开发者快速构建具有美观、交互性和响应式的Web应用程序。 下面是一个Vue + Element UI的示例,实现了一个简单的表格和一个表单。在示例中,我们首先安装VueElement UI,然后创建Vue实例,并在其中引入Element UI组件,最后将Vue实例挂载到HTML页面上。 引用:以下是Vue + Element UI的示例[^1]: ```HTML <!DOCTYPE html> <html> <head> <title>Vue + Element UI</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> <el-form :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input-number v-model="form.age"></el-input-number> </el-form-item> <el-form-item label="性别"> <el-radio-group v-model="form.gender"> <el-radio label="male">男性</el-radio> <el-radio label="female">女性</el-radio> </el-radio-group> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </div> <script> new Vue({ el: '#app', data: { tableData: [{ name: '张三', age: 18, gender: 'male' }, { name: '李四', age: 22, gender: 'female' }], form: { name: '', age: '', gender: '' } }, methods: { submitForm() { alert(JSON.stringify(this.form)); } } }) </script> </body> </html> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值