SoFunction
Updated on 2025-04-05

Example of all-select and all-select functions implemented [based on elementui]

This article describes the all-select and all-select functions implemented. Share it for your reference, as follows:

Elementui has a checkbox component, but the problem is that only simple strings can be nested in the checkbox component. What should I do if I want to embed a tag?

First render the page:

<el-checkbox v-model="checkAll" @change="handleCheckAllChange">Select all</el-checkbox>
<tbody v-for="item in orderData">
 <tr>
  <td class="order-num" colspan="7">
   <el-checkbox v-model="" @change="handleCheckItemChange" style="vertical-align:top;margin-top:20px;"></el-checkbox>
   <div class="num">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Order number：{{}}</a>
    <p>Merchant order number：{{}}</p>
   </div>
  </td>
  <td class="order-action" colspan="2">
   <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >check the details</a>-<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Remark</a>-<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Add stars</a>
  </td>
 </tr>
 <tr>
  <td>
   <div class="pic">
    <img :src= alt="">
   </div>
   <div class="info">
    <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{}}</a>
    <p>{{}}</p>
    <p>Product Source：{{}}</p>
   </div>
  </td>
  <td>{{}}</td>
  <td>{{}}</td>
  <td>-</td>
  <td>{{}}</td>
  <td>
   <p>{{}}</p>
   <p>({{}})</p>
  </td>
  <td>{{}}<br />{{}}</td>
  <td>{{}}</td>
  <td>{{}}<br /><span v-if="">(freight：{{}})</span></td>
 </tr>
</tbody>

Initialize data:

checkAll:false,
checkedAllShops:[],
checkItemData:[],
orderData:[
 {
  checkModel:false,
  orderNumber:'2017081618322542542',
  shopNumber:'2017081618322542542',
  orderPic:'../../../../static/images/',
  name:'【Mall】Put the Easy Acupuncture Point Moxibustion Patch',
  size:'5 stickers*box',
  from:'Our store products',
  number:'10',
  price:'200.00',
  company:'The Legend of Flowers',
  address:'Fairy Tale Town',
  phone:'12345678910',
  date:'2018-1-12',
  time:'09:30:00',
  state:'Order Close',
  pay:'400.00',
  postCost:'10'
 },{
  checkModel:false,
  orderNumber:'2017081618322542542',
  shopNumber:'2017081618322542542',
  orderPic:'../../../../static/images/',
  name:'【Mall】Put the Easy Acupuncture Point Moxibustion Patch',
  size:'5 stickers*box',
  from:'Our store products',
  number:'10',
  price:'200.00',
  company:'The Legend of Flowers',
  address:'Fairy Tale Town',
  phone:'12345678910',
  date:'2018-1-12',
  time:'09:30:00',
  state:'Order Close',
  pay:'400.00',
  postCost:'10.00'
 }
]

Related methods:

handleCheckAllChange(val){
 ((item,i)=>{
   = val;
 })
},
handleCheckItemChange(val){
 for(let i = 0,l = ;i < l;i ++){
  if([i].checkModel !== val){
    = false;
   return;
  }
 }
  = val;
}

The css code will not be posted, it is not good-looking, haha

Interested friends can also use the following online tools on this site to test the operation effect:

Online HTML/CSS/JavaScript front-end code debugging and running tools:
http://tools./code/WebCodeRun

Online HTML/CSS/JavaScript code running tools:
http://tools./code/HtmlJsRun

I hope this article will be helpful to everyone's programming.