精华内容
下载资源
问答
我要提问
  • vue复选框全选全不选
    千次阅读
    2018-12-14 21:29:54 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<div id="app">
    <p>
        全选：
    </p>
    <input type="checkbox" id="checkbox" v-model="checked" @click="changeAllChecked()">
    <p>
        多个复选框：
    </p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <br>
    <span>
选择的值为:{{checkedNames}}
</span>
</div>
<script>
    var app= new Vue({
        el: '#app',
        data: {
            checked: false,
            checkedNames: [],
            checkedArr:["Runoob","Google","Taobao"]
        },
        methods: {
            changeAllChecked: function () {
                var self=this;
                if (!self.checked) {
                    self.checkedNames=[]
                } else {
                    self.checkedNames=self.checkedArr;
                }
            }
        },
        watch:{
            "checkedNames":function(){
                if(this.checkedNames.length!=this.checkedArr.length){
                    this.checked=false
                }else{
                    this.checked=true
                }
            }
        }
    })
</script>
</body>

</html>

    效果如下：

    在这里插入图片描述

    更多相关内容

  • vue 实现全选全不选的示例代码

     2020-08-27 18:26:45
    本篇文章主要介绍了vue 实现全选全不选的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • vue.js实现的全选与全不选功能示例【基于elementui】

     2020-10-17 16:28:07
    主要介绍了vue.js实现的全选与全不选功能,结合实例形式分析了vue.js基于elementui实现全选与全不选功能的相关页面渲染、初始化数据及功能函数等相关操作技巧,需要的朋友可以参考下
    收起

  • Vue实现单选多选反选全选全不选

     2021-10-09 14:35:48
    注意使用这个插件的时候不能用v-if，要用v-show，否则无法实现预期效果。 （我在这上面踩了很久的坑，才突然顿悟的） 需要引入mint相关的js和css <link rel="stylesheet" type="text/css" href="../cs...

    功能：实现点击选中，再点击取消选中，全选，取消全选，左滑删除。

    页面效果如下：

    左滑删除功能需要用到mint-ui的mt-cell-swiper。

    注意使用这个插件的时候不能用v-if，要用v-show，否则无法实现预期效果。

    （我在这上面踩了很久的坑，才突然顿悟的） 

    需要引入mint相关的js和css

    <link rel="stylesheet" type="text/css" href="../css/mint-ui.css" />


    <script type="text/javascript" src="../script/mint-ui.js"></script>

     html 部分

        <!-- 购物车2 -->
        <div class="relative-box " v-show="showModalCart">
            <transition name="fade">
                <div class="over-lay" v-show="showModalCart" @click="closeModalCart"> </div>
            </transition>
            <transition name="slide-fade">
                <div class="modal-c" v-if="showModalCart2" ref="modalBox">
                    <div class="cart-list" v-for="(item, index) in cartData" :key="index">
                        <mt-cell-swipe :right="[
                        {
                          content: '删除',
                          style: { color: '#fff' },
                          handler: function(){return removeCartItem(index,item)}
                        },
                      ]">
                            <div class="keyword-item2">
                                <p class="keyword-name " @click="toggleSelectItem(index,item)">
                                    <img v-show="!checkbox.includes(item.name)" src="../image/noSelected.png"
                                        alt="添加按钮（未选中）" class="select-icon">
                                    <img v-show="checkbox.includes(item.name) " src="../image/selected.png"
                                        alt="添加按钮(选中）" class="select-icon">
                                    <span class="itemName">{{item.name}}</span>
                                </p>
                                <ul class="list-wrapper ">
                                    <li class="list-item ">
                                        <p class="value ">{{item.searchVolume | format}}</p>
                                        <p class="tips">平均每月搜索量</p>
                                    </li>
                                    <li class="list-item ">
                                        <p class="value ">{{item.competition}}</p>
                                        <p class="tips">竞争程度</p>
                                    </li>
                                    <li class="list-item ">
                                        <p class="value "><em>¥</em>{{item.money}}</p>
                                        <p class="tips">每次点击费用</p>
                                    </li>
                                </ul>
                            </div>
                        </mt-cell-swipe>
                    </div>
                    <div class="footer-bar2 footer-bar">
                        <div class="cart shoppingBox" @click="toggleSelect">
                            <img src="../image/noSelected.png" v-show="!isCheckAll" class="select-icon select-icon2">
                            <img src="../image/selected.png" v-show="isCheckAll" class="select-icon select-icon2">
                            <div>全选</div>

                        </div>
                        <div class="next-step" :class="checkbox.length == 0 ?'disable':''" @click="nextStep">
                            立即添加 <span v-if="checkbox.length>0">({{checkbox.length}})</span>
                        </div>
                    </div>
                </div>
            </transition>
        </div>

    需要用到的data

    （这里checkbox和cartDataSelect都是记录选中的关键字的数组，只不过checkbox只存的是关键字的名字，cartDataSelect存的完整的选中的关键字信息以传递给其它页面或者给接口）

    showModalCart: false, // 弹框显示/隐藏
showModalCart2: false, // 弹框显示/隐藏
cartData: [], // 总的购物车数据
cartDataSelect: [],// 实际选中的购物车数据
checkbox: [],//选中的关键字

    相关的computed

    computed: {
    //判断是否全部选中
    isCheckAll: function () {
        if (this.checkbox.length == this.cartData.length) {
            return true;
        }
        console.log("判断", this.checkbox.length, this.cartData.length);
        return false;
    },
}

    相关的methods

    /***
 * 关闭购物车弹框
 * **/
closeModalCart: function () {
    this.showModalCart2 = false;
    var that = this;
    setTimeout(function () {
        that.showModalCart = false;
    }, 300)
},

// 关键字是否全选
toggleSelect() {
    //如果全选，就是清空选择；如果不是，那就全都安排一下
    if (this.isCheckAll) {
        this.checkbox = [];
        this.cartDataSelect = [];
    } else {
        this.checkbox = [];
        for (let item of this.cartData.values()) {
            this.checkbox.unshift(item.name);
            var cartItem = {
                name: item.name,
                money: item.money,
                competition: item.competition,
                searchVolume: item.searchVolume,
                adsBudgetTipsText: item.adsBudgetTipsText
            }
            this.cartDataSelect.unshift(cartItem);
        }
    }

},
toggleSelectItem(index, item) {

    var idx = this.checkbox.indexOf(item.name);
    //如果已经选中了，那就取消选中，
    if (idx > -1) {
        this.checkbox.splice(idx, 1);
        this.cartDataSelect.splice(idx, 1);
    } else {
        //idx =-1,没有找到，添加进去
        this.checkbox.push(item.name);
        var cartItem = {
            name: item.name,
            money: item.money,
            competition: item.competition,
            searchVolume: item.searchVolume,
            adsBudgetTipsText: item.adsBudgetTipsText
        }
        this.cartDataSelect.unshift(cartItem);
    }
  
},
/***
 * 删除一项购物车关键词
 * **/
removeCartItem: function (index, item) {
    var idx = this.checkbox.indexOf(item.name);
    console.log("idx", idx);
    //如果删除的是已经选中的关键字，则从checkbox去除，
    if (idx > -1) {
        this.checkbox.splice(idx, 1);
        this.cartDataSelect.splice(idx, 1);
    }
    this.cartData.splice(index, 1);
    if (this.cartData.length === 0) {
        this.closeModalCart();
    }
},

    二级菜单的单选

    效果如下：

    
<!-- 选择广告组弹窗-->
<div class="relative-box-ad" v-show="showModalAd">
    <transition name="fade">
        <div class="over-lay" v-show="showModalAd" @click="closeModalAd"> </div>
    </transition>
    <transition name="slide-fade">
        <div class="modal-c modal-ad" v-if="showModalAd2">
            <div class="nullData" v-if="campaignData.length == 0">
                <img src="../image/nulldata.png">
                <div class="text">还没有广告，请先创建</div>
            </div>
            <div class="hasData" v-else>
                <div class="title">
                    添加到广告系列或组
                </div>
                <div class="campaign-list" v-for="(item,key) in campaignData" :key="key">
                    <div class="wrap" v-if="item.status !=='removed'">
                        <div class="name-wrap" @click="toggleCampaignName(key)">
                            <div class="status-name">
                                <div :class="item.status =='enabled'?'status':'gray'"></div>
                                <div class="name">{{item.name}}</div>
                            </div>
                            <i v-if="item.ad_groups.length !== 0"
                                class="icon iconfont icon-iconfontjiantou5 icon-right"
                                :class="showGroup && currIndex == key?'rotateIcon':'' "></i>
                        </div>
                        <ul v-show="showGroup && currIndex == key">
                            <li v-for="(item2,key2) in item.ad_groups" :key="key2"
                                @click="selectGroup(item,item2)">
                                <div class="status-group">
                                    <div :class="item2.status == 'enabled'?'status':'gray'"></div>
                                    <div class="name">{{item2.name}}</div>
                                </div>
                                <img src="../image/selected.png" alt="添加按钮(选中）"
                                    v-show="adgroup_id.includes(item2.id) " class="select-icon">
                                <img src="../image/noSelected.png" alt="添加按钮(未选中）"
                                    v-show="!adgroup_id.includes(item2.id)" class="select-icon">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="footer">
                    <div class="certain" @click="handleAddKeyword"
                        :class="adgroup_id.length == 0 ?'disableBtn':''">
                        确定
                    </div>
                </div>
            </div>
        </div>
    </transition>
</div>

    相关data

    showModalAd2: false,
showModalAd: false,
adgroup_id: [],//选中的广告组ID
campaign_id: [],//选中的系列ID
showGroup: false,//是否展示二级菜单

campaignData: [
    {
        name: "广告系列名称",
        status: "enabled",
        id: "105319600965",
        ad_groups: [
            {
                status: "enabled",
                id: "305319600965",
                name: "广告组名称1广告组名称1广告组名称1广告组名称1广告组名称1广告组名称1广告组名称1广告组名称1",
            }
        ]
    },
    {
        name: "广告系列名称",
        status: "enabled",
        ad_groups: [
            {
                id: "112711085931",
                status: "enable",
                name: "广告组名称1",
            }, {
                id: "112711085933",
                status: "disabled",
                name: "广告组名称1",
            }
        ]
    },
    {
        name: "广告系列名称3x广告系列名称广告系列名称广告系列名称广告系列名称广告系列名称广告系列名称广告系列名称",
        status: "enabled",
        id: "107333814896",
        ad_groups: [
            {
                status: "enabled",
                id: "107333814896",
                name: "广告组名称1",
            }, {
                status: "disabled",
                id: "113786563184",
                name: "广告组名称1",
            }
        ]
    },
],

    相关的methods

    // 二级菜单广告组的选中与否
selectGroup(item, item2) {
    console.log("组ID")
    console.log(item2.id)
    var idx = this.adgroup_id.indexOf(item2.id);

    console.log("idx", idx);
    //如果已经选中了，那就取消选中，
    if (idx > -1) {
        this.adgroup_id.splice(idx, 1);
        this.campaign_id.splice(idx, 1);
    } else {
        this.adgroup_id.pop();
        //idx =-1,没有找到，添加进去
        this.adgroup_id.push(item2.id);
        this.campaign_id.pop();
        this.campaign_id.push(item.id);
    }

},
// 一级菜单广告系列名称的展开和隐藏
toggleCampaignName(index) {
    this.currIndex = index;
    // 判断当前索引是否在索引数组spanIndex中。arrIndex的值只有两种结果，-1未找到。0找到了。
    this.arrIndex = this.spanIndex.indexOf(index);

    if (this.arrIndex == 0) {
        //arrIndex ==0，找到索引了，在索引数组spanIndex删除该索引,隐藏二级导航。
        this.spanIndex.splice(this.arrIndex, 1);
        this.showGroup = false;
        // this.isSelectGroup = false;
    } else {
        // arrIndex ==-1,没有找到，splice(-1,1)从spanIndex数组结尾处删除1个值，并将当前索引添加到索引数组spanIndex，show2为true，展示二级导航，
        this.spanIndex.splice(this.arrIndex, 1);
        this.spanIndex.push(index);
        this.showGroup = true;
    }
},

    收起
    展开全文
    javascript html

  • vue 全选与反选的实现方法(无Bug 新手看过来)

     2020-12-29 03:39:12
    我就废话不多说，直接上代码吧！ <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> </head> <body> (item,> <input type...
    收起

  • Vue实现全选、反选、全不选功能

     千次阅读 多人点赞 2022-03-03 16:53:18
    Vue实现全选、反选、全不选功能

    一、搭建自己所需要的table列表

     

    <div class="mian">
        <table width="150" height="40" cellspacing="0">
          <tr>
            <td>
              <input type="checkbox">
            </td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox">
            </td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </table>
  </div>

    二、渲染数据

    <template>
  <div class="mian">
        <table width="150" height="40"  cellspacing="0">
          <tr>
            <td>
              <input type="checkbox">
            </td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
          </tr>
          <tr v-for="(item,index) in list" key="item.id">
            <td>
              <input type="checkbox">
            </td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
          </tr>
        </table>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        list:[
          {id:'12345678',name:'张三',sex:0,age:'19'},
          {id:'12344677',name:'李四',sex:1,age:'19'},
          {id:'12343674',name:'王五',sex:0,age:'19'},
          {id:'12342673',name:'赵六',sex:0,age:'19'},
          {id:'12341672',name:'小花',sex:1,age:'19'}
        ] //list模拟接口请求出来的数据
      }
    },
    methods:{

    }
  }
</script>

    现在运行一下代码，看看你运行后是否如下图一样（样式除外）：

     三、向数据中添加字段及v-model对应字段

    <template>
  <div class="mian">
        <table width="150" height="40"  cellspacing="0" >
          <tr>
            <td>
              <input type="checkbox"  v-model="allchecked">
            </td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
          </tr>
          <tr v-for="(item,index) in list" key="item.id">
            <td>
              <input type="checkbox" v-model="item.checkeds">
            </td>
            <td>{{item.name}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.age}}</td>
          </tr>
        </table>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        allchecked:false,// table表头复选框字段
        list:[
          {id:'12345678',name:'张三',sex:0,age:'19'},
          {id:'12344677',name:'李四',sex:1,age:'19'},
          {id:'12343674',name:'王五',sex:0,age:'19'},
          {id:'12342673',name:'赵六',sex:0,age:'19'},
          {id:'12341672',name:'小花',sex:1,age:'19'}
        ] //list模拟接口请求出来的数据
      }
    },
    mounted() {
      this.list.map((item,index)=>{
          item.checkeds=false;
      }) //向列表每一条数据中添加checkeds字段
    },
    methods:{

    }
  }
</script>

    四、全选、全不选实现方式

     methods:{
        //实现全选功能
        inputcheck(){
             this.list.map((item,index)=>{
                 item.checkeds=!this.allchecked;
             })
        }
    }

    五、反选实现方式

      methods:{
        //实现全选功能
        inputcheck(){
             this.list.map((item,index)=>{
                 item.checkeds=!this.allchecked;
             })
        },
        // 实现反选功能
        tdcheckeds(){
           let self = this;
             this.list.map((item,index)=>{
                 if(item.checkeds!==false){
                   self.allchecked=item.checkeds;
                   self.checkedlist.push(item);
                 }else{
                   let e = self.checkedlist;
                   for (let i = 0; i <= e.length; i++) {
                     if (e[i] !== undefined) {
                       if (e[i].id === item.id) {
                         self.checkedlist.splice(i, 1);
                       }
                     }
                   }
                 }
             })
        }
    },
      watch:{
      checkedlist(e){ //如果多选数据发生改变时就会运行次函数
        if (e.length === 0) {
          this.allchecked = false;
        }
      }
    }

    六、table属性

    收起
    展开全文
    elementui javascript

  • vue 在列表内全选，全不选功能实现，及禁用实现及编辑前端map保存数据，两种方法

     2022-02-11 09:31:44
    <template> <div class="hello">...禁用全选</el-button> <el-button @click="cancelBanCheckAll">取消禁用</el-button> <el-table ref="multipleTable" :data="tabl

    注意：全选禁用时，插槽中的header部分不更新，需要加上slot-scope="{column,$index}" 或 加#header才可更新

    第一种方法：

    <template>
  <div class="hello">
    <el-button type="primary" @click="banCheckAll">禁用全选</el-button>
    <el-button @click="cancelBanCheckAll">取消禁用</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      border
    >
      <el-table-column label="日期" prop="activity"></el-table-column>
      <el-table-column :key="checkAll">
        <!-- 另一种方法 -->
        <!-- <template #header> -->
        <template slot="header" slot-scope="{ column, $index }">
          <el-checkbox
            v-model="checkAll"
            @change="handleCheckAllChange"
            :disabled="state"
          >
            全选
          </el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checked"
            @change="itemChange(scope)"
            :disabled="state"
          >
            选中
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="显示">
        <template slot-scope="scope">{{ scope.row.checked }}</template>
      </el-table-column>
      <el-table-column label="链接">
        <template slot-scope="scope">
          <el-button
            :disabled="!scope.row.checked"
            size="mini"
            type="primary"
            plain
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-button
            :disabled="!scope.row.checked || !scope.row.successState"
            type="success"
            size="mini"
            icon="el-icon-check"
            circle
          ></el-button>
          {{ scope.row.successState }}
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="编辑" :visible.sync="table">
      <el-form ref="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-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">前台保存</el-button>
          <el-button @click="handleCancel">取消保存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-button type="success" @click="onSubmit" style="margin-top: 30px">
      保存全部
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: false,
      form: {
        name: "",
        region: "",
        delivery: false,
        resource: "",
        desc: "",
      },
      map: {},
      tableMap: {},
      rowState: "fail",

      state: false,
      checkAll: undefined,
      tableData: [
        {
          activity: "1我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "2我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "3我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "4我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "5我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "6我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
      ],
    };
  },
  mounted() {
    this.map = new Map();
  },
  methods: {
    handleCheckAllChange(val) {
      this.tableData.forEach((item) => (item.checked = val));
    },
    isHarfChecked() {
      return this.tableData.every((v) => v.checked);
    },
    itemChange() {
      this.$set(this, "checkAll", this.isHarfChecked());
      this.submit();
    },
    submit() {
      const list = this.tableData.filter((v) => v.checked);
      // console.log(list);
    },
    handleEdit(index, row) {
      if (row.successState && row.checked) {
        this.rowState = "success";
      } else {
        this.rowState = "fail";
      }

      this.form.region = "";
      this.form.delivery = false;
      this.form.resource = "";
      this.form.desc = "";

      this.form.nameKey = row.activity; //拿到表格中的日期，作为map中唯一的key存进去
      this.form.name = row.activity;
      this.table = true;

      // 第二步：打开当前行的编辑，弹窗里的东西还在；否则不在
      if (this.tableMap[row.activity]) {
        this.form = JSON.parse(JSON.stringify(this.tableMap[row.activity]));
      } else {
        this.form.name = row.activity;
      }
    },
    banCheckAll() {
      this.state = true;
    },
    cancelBanCheckAll() {
      this.state = false;
    },
    handleSave() {
      this.map.set(this.form.nameKey, JSON.parse(JSON.stringify(this.form)));
      this.table = false;
      this.tableData.forEach((item) => {
        if (this.form.nameKey === item.activity) {
          item.successState = true;
        }
      });
      // 第一步：打开当前行的编辑，弹窗里的东西还在；否则不在
      this.tableMap[this.form.nameKey] = JSON.parse(JSON.stringify(this.form));
    },
    // 取消保存
    handleCancel() {
      if (this.rowState === "success") {
        this.tableMap[this.form.nameKey] = JSON.parse(
          JSON.stringify(this.tableMap[this.form.nameKey])
        );
      }
      this.table = false;
    },
    onSubmit() {
      // 发送给后台
      console.log("123", Array.from(this.map.values()));
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-select {
  width: 80%;
}
.el-input__inner {
  width: 80%;
}
.el-input--suffix .el-input__inner {
  width: 100%;
}
.el-textarea__inner {
  width: 80%;
}
</style>

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    第二种方法：

    <template>
  <div class="hello">
    <el-button type="primary" @click="banCheckAll">禁用全选</el-button>
    <el-button @click="cancelBanCheckAll">取消禁用</el-button>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      border
    >
      <el-table-column label="日期" prop="activity"></el-table-column>
      <el-table-column :key="checkAll">
        <!-- 另一种方法 -->
        <!-- <template #header> -->
        <template slot="header" slot-scope="{ column, $index }">
          <el-checkbox
            v-model="checkAll"
            @change="handleCheckAllChange"
            :disabled="state"
          >
            全选
          </el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.checked"
            @change="itemChange(scope)"
            :disabled="state"
          >
            选中
          </el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="显示">
        <template slot-scope="scope">{{ scope.row.checked }}</template>
      </el-table-column>
      <el-table-column label="链接">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="编辑" :visible.sync="table">
      <el-form ref="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-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="即时配送">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="特殊资源">
          <el-radio-group v-model="form.resource">
            <el-radio label="线上品牌商赞助"></el-radio>
            <el-radio label="线下场地免费"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSave">前台保存</el-button>
          <el-button @click="handleCancel">取消保存</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-button type="success" @click="onSubmit" style="margin-top: 30px">
      保存全部
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: false,
      form: {
        name: "",
        region: "",
        delivery: false,
        resource: "",
        desc: "",
      },

      state: false,
      checkAll: undefined,
      tableData: [
        {
          activity: "1我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "2我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "3我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "4我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "5我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
        {
          activity: "6我是活动",
          name: "王小虎",
          checked: false,
          successState: false,
        },
      ],

      OldDate: {},
      Index: 0,
    };
  },
  mounted() {},
  methods: {
    handleCheckAllChange(val) {
      this.tableData.forEach((item) => (item.checked = val));
    },
    isHarfChecked() {
      return this.tableData.every((v) => v.checked);
    },
    itemChange() {
      this.$set(this, "checkAll", this.isHarfChecked());
      this.submit();
    },
    submit() {
      const list = this.tableData.filter((v) => v.checked);
      console.log(list);
    },

    handleEdit(index, row) {
      this.OldDate = { ...row }; //旧数据 点击编辑首先把旧数据保存，是为了取消的时候直接还原所有的值
      this.form = { ...row }; // 数据添加到表单
      this.table = true; // 打开弹窗
      this.Index = index; // 保留打开的下标
    },
    banCheckAll() {
      this.state = true;
    },
    cancelBanCheckAll() {
      this.state = false;
    },
    handleSave() {
      this.table = false; // 关闭弹窗
      this.$set(this.tableData, this.Index, { ...this.form }); // 把表单数据保存到原数据里面
      this.$forceUpdate(); // 更新视图层，可以不写
    },
    handleCancel() {
      this.$set(this.tableData, this.Index, { ...this.OldDate }); // 取消时，换原数据
      this.OldDate = {}; // 旧数据制空
      this.table = false;
    },
    onSubmit() {
      // 发送给后台
      console.log("this.tableData", JSON.stringify(this.tableData));
    },
  },
};
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-select {
  width: 80%;
}
.el-input__inner {
  width: 80%;
}
.el-input--suffix .el-input__inner {
  width: 100%;
}
.el-textarea__inner {
  width: 80%;
}
</style>

    在这里插入图片描述

    收起
    展开全文
    前端 javascript

  • Vue实现全选，反选，全不选

     千次阅读 2019-11-11 20:29:00
    Vue实现全选，反选，全不选 在vue中实现默认选中以及获取单选/复选框的value值都会用到同一个方法，那就是在data中定义一个数组，然后用v-model=“这个数组” data: { whoms:[1,2], } 这样就会默认选中value值是1...
    收起

  • Vue购物车（全选和全不选）

     2021-02-17 10:09:15
    } style> head> <body> <div id='app'> <table> <thead> <tr> <th><input type="checkbox" v-model="isAll" @change="checkAll">全选/全不选th> 商品名称th> 商品价格th> 商品数量th> 操作th> tr> thead> <tbody> ...
    收起
    前端

  • vue实现全选全不选（基于elementui）

     千次阅读 2018-07-21 17:06:29
    elementui是有checkbox组件，不过问题在于checkbox组件内只能嵌套简单的字符串，如果要嵌入标签怎么办? 首先渲染页面： &...全选&amp;lt;/el-checkbox&amp;gt; &amp;lt;tbody v-for=
    收起
    elementui

  • 购物车的全选，全不选，局部全选，全选判定

     2019-11-11 22:06:59
    购物车的全选，全不选，局部全选，全选判定
    收起

  • Vue checkBox 全选 全不选 反选 单选 完整实现

     2021-12-11 23:40:48
    <div v-for="(item, index) in pageData"> <input type="checkbox" :value=item.code v-model="checkBoxList"/> </div> <div> 所选择的数组为：{{checkBoxList}}...全不选</button&g
    收起
    前端 javascript

  • vue实现全选、全不选和部分选择功能

     万次阅读 2018-07-24 18:02:37
    所以，这里就在谈谈用vue实现全选、全不选和部分选择功能，它们具体到底是怎么用代码实现的。这里我先贴出图让大家看下是什么样的布局与效果： 这里我先贴出一个链接，大家可以去看看了解一下： ...
    收起

  • vue三种方式实现：全选、反选、全不选

     万次阅读 多人点赞 2019-01-01 13:20:24
    全不选 喜好: {{item.text}} : <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> new Vue({ el: "#app", data: function () { return { inputArr: [ { text: '足球', checked: ...
    收起

  • Vue三种方式实现全选全不选：@click点击事件方式、computed计算属性方式和watch监听器方式

     2021-04-26 13:51:44
    下面的选项按钮用一个div包裹，并添加change事件来监听是否全选。 注：click事件是点击之后，视图里的数据还没有更新到data数据里，所以导致data数据不是最新的状态，需要取反。change事件是视图绑定的数据发生了...
    收起

  • vue中实现购物车效果复选框的全选、全不选、以及子选项

     千次阅读 2020-04-09 10:27:33
    vue复选框的全选和全不选 适合初学者 这是静态完整代码 做了一个简单的购物车效果 <li class="header"> <div class="pro-check"> <el-checkbox v-model="isAllCheck" @change="selectedAll">...
    收起
    javascript

  • vue实现全选、反选功能

     2020-08-30 05:57:44
    主要为大家详细介绍了vue实现全选、反选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    收起

  • vue计算属性computed实现表单的全选和全不选

     2020-07-08 17:13:47
    说明： 页面使用BootStrap框架搭建 <div id="app"> <div class="panel panel-info"> <div class="panel-heading">...全选和反选</h3> </div> <div class="panel-body"> &
    收起

  • vue实现下拉复选框全选与全不选

     2021-10-11 20:42:27
    <el-select multiple collapse-tags v-model="searchForm.auditResult" @change="change...el-option label="全选" value="全选" @click.native="selectAll"></el-option> <el-option v-for="(i...
    收起
    javascript html

  • vue实现全选全不选

     万次阅读 2018-03-27 13:17:21
    全选功能可以说是前端开发中非常常见的一个功能。从jQuery到vue的转变主要是一个思想想的转变，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，对功能的实现自然容易理解一些。
    收起
    前端开发 checkbox javascript

  • vue中el-checkbox的全选全不选

     2021-08-31 11:42:50
    vue中el-checkbox的全选全不选 ** html 成立时间 data: checkAll_time:false, checkTimes:[], js - methods: // 成立时间 allTime(val){ if(this.checkAll_time == false){ this.checkTimes = .
    收起

  • vue 全选多选全不选

     2021-03-30 12:52:49
    收起

  • vue 实现搜索的结果页面支持全选与取消全选功能

     2020-11-29 17:05:31
    演示地址，打开、搜索、随便点 ...npm i element-ui -S // main.js import ElementUI from 'element-ui' ... 全选时全部追加到已选，取消全选时从已选中删除当前搜索的列表 功能列表 1、搜索时展示相应的数据
    收起

  • Vue+Vant制作单选全选全不选以及删除按钮van-checkbox

     千次阅读 2019-09-26 14:08:57
    在官网上看到vant组件特别好用，就尝试使用checkbox制作单选全选，由于是下午头脑不清楚...全选全不选 1. 引入组件 import Vue from ‘vue’; import { Checkbox, CheckboxGroup } from ‘vant’; Vue.use(Checkb...
    收起
    Vant

  • Vue 全选-全不选-反选 demo

     2019-11-22 22:58:45
    Vue 全选-全不选-反选 demo直接上代码 直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
    收起
    computed

  • vue实现全选与全不选

     2019-03-07 22:25:07
    源码 https://segmentfault.com/q/1010000012675796?_ea=3106401 演示 http://lxchuan12.github.io/html5/vuejs/vue2.0/13、单选全选SF答题.html
    收起

  • vue实现单选多选全选全不选功能

     千次阅读 2019-06-04 16:02:22
    经常遇到一个按钮控制全选/全不选，下面在全选的基础上附上 全选/全不选 代码 全选/取消全选 ()">{{isCheckAll?'清空':'全选'}} methods:{ //全选/取消全选转换 choosecheck(){ if(this.isCheckAll){ this...
    收起
    多选

  • vue2.0实现一键全选，全不选

     2021-06-01 19:55:58
    当单个选中所有时，全选自动变成全选状态；当全选后，取消其中一个，全选状态改变。
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,084
精华内容 2,833
热门标签
关键字：

vue全选全不选