先说明一下，‘重点的地方’ 及‘ 常用的地方’基本都用文字说明了，可以仔细看一下
接触前端时间不长，大家可以一起交流分享自己的经验和所得
第一步，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
},
}
```
结束语： 这个复选框，全选，搞了很久，现在明白了
这样的效果
