先说明一下，‘重点的地方’ 及‘ 常用的地方’基本都用文字说明了，可以仔细看一下

接触前端时间不长，大家可以一起交流分享自己的所得！

第一步，html 页面显示 table 样式直接复制

ref 及 change 还有columns 都是不可以少的 为了更好的得到数据

这上面是html中的代码
<div style="height:500px;overflow:scroll;">
        <Table border ref="selection"  @on-selection-change="handleSelectRow()" style="margin-top: 20px;" :columns="columns4" :data="tdata2"></Table>
      </div>

第二步，放在data中的一些数据

data({
return{
		columns4: [
// 重点说明：key 里面的值，是和后台的字段相对应的
              {type: 'selection',width: 60,align: 'center'},  //这里是复选框
              {title: '淘宝订单号',width:170,key: 'tbOrderCode'},
              {title: '收货人姓名',width:100,key: 'taShrname'},
              {title: '收货地址',width:300,key:'taAddress'},
              {title: '联系手机',width:150,key:'taMoblie'},
              //  重点说明一下这里状态，我从后台获取 得到的是  3 2 1 这些数字，但是如何根据不同的数据显示不同的文字，
              //  需要用到render 这个函数
              {title: '状态',key:'taOrdertype',width:100,
               //  这个地方直接复制，修改从后台获取的字段taOrdertype 
			                render: (h, params) => {
			                   if(params.row.taOrdertype == '3'){
			                      return h('span',{},'已发包')  
			                       //  中文就是显示在表格里面的数据		
			                      											
			                      			// 如果这里需要改变颜色，可以参考官网，复制style ,放在{} 这里面
			                    }else if(params.row.taOrdertype == '2'){
			                      return h('span',{},'已申请发包')
			                    }else if(params.row.taOrdertype == '1'){
			                      return h('span',{},'未申请发包')
			                    }
			                }
                
              },
              {title: '快递类型',key: 'taWlcompany'},
              {title: '快递单号',key: '-'},
              {title: '操作',
                render: (h, params) => {
                  return h('div', [
                    h('Button', {
		                      props: {
		                        type: 'primary',
		                        size: 'small'
		                      },
		                      style: {
		                        marginRight: '5px'
		                      },
		                      //  这里就是给表格里面添加一个操作，删除编辑添加啥的，就是在这里了
		                       //  this.Editadd(params.index)      这个是自己取得一个定义的一个方法，我的是编辑，弹出一个框进行编辑
		                       //  里面传 params.index   是当前的下标
			                      on: {
			                        click: () => {
			                         this.Editadd(params.index)     
			                        }
                      }
                    }, '编辑')
                  ]);
                }},
            ],

}
})

第三步 methods里面的方法

methods:
{
		  handleSelectRow(){
		          //这里是获取点击的这一行的数据，
		          const a = this.$refs.selection.getSelection()
					// 不明白是什么自己打印一下
		          //下面 的代码就是根据这一条数据，for循环是为了获取它的id  （这里根据自己的要求来定）
		          // 涉及到多条数据的查询，后台给我的要求每个id 之间是用 ' , ' 隔开，所以我直接把当前的id 和 之前的获取到的id 一并放到一起
		          出现的就是   1111,2222,3333,4444,
		          然后在for外面拿一个变量接收这个b      ~ 感觉表达不太对
		          var b = '';
		          for(var i  = 0;i <a.length;i++ ){
		            this.daifaid = a[i].id
		            if(a.length > 1){
		              b  = this.daifaid +','+ b
		            }else{
		              b  = this.daifaid
		            }
		          }
		          this.daifaid = b
		        },

}
```

结束语： 这个复选框，全选，搞了很久，现在明白了
这样的效果