weixin_44015100
weixin_44015100
采纳率100%
2019-01-22 00:18

vue删除选框选中内容功能

图片说明图片说明

<el-card :body-style="{ padding: '0px' }">
          <img :src="item.url" class="image">

下面是新加的选框按钮,用element引入,还有就是用v-model绑定时,点击一个所有都会选中,搞不懂。
          <el-checkbox  class="check"></el-checkbox>

大佬求解答~~~ 我用axios获取json文件,然后渲染到页面上,现在想做一个删除功能,点击删除按钮删除多选框选中内容, 跪求回复~~~最好能上代码~

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • qq_40021323 妖王令剑 2年前

    我没看到不写的删除按钮 和 多选, 有什么不懂的可以直接到Element UI官网上看案例, 或者直接复制官网的案例到自己的项目上试一试 , 然后再慢慢的改成你想要的东西 , 这样有助于你对Element UI的认识; http://element-cn.eleme.io/#/zh-CN/component/checkbox

    点赞 评论 复制链接分享
  • weixin_44015100 weixin_44015100 2年前

    终于做好了,element的多选框多选用 :value="index" v-model="checked"绑定数组一直搞不好,
    点一个其他的也跟着被选中,不知道是不是-vfor循环的原因,索性用普通的多选框来做,用 :value="index" v-model="checked"绑定数组后可以获取index的值,在数组中把它对应的列删掉就好,下面贴代码

      <img :src="item.url" class="image">
              <!--技术有限,只能换成普通多选框,其他不变
                         <input type="checkbox" :value="index" v-model="checked" class="check">
    

    以下是功能按钮,删除键

    ```



    • 搜索


    • 导入


    • 分享


    • 删除



    这是点击删除时绑定的函数
    

    methods: {
    remove(){
    // this.checked
    var aaa ;
    //选项的值进行排序,否则顺序错乱
    var $checked = this.checked.sort();
    for (var i = $checked.length ; i > 0 ; i--) {
    //长度-1是对应的下标
    aaa = this.checked[i-1];
    this.getData.splice(aaa,1);

        }
        //数组归零
        this.checked = [];
      },
    },
    
    大概就这样,新手编写,百度了很久自己调试了一早上才做好,一定注意多选框绑定的数组里的元素顺序,不排序的话...不信邪地孩子可以自己玩,
    
    点赞 评论 复制链接分享