Element Ui Table 多选框
// 收货明细-移除
deleteRow: function deleteRow(index, rows) {
rows.splice(index, 1);
},
// 点击全选时调用
handleSelectAll: function handleSelectAll(selection) {
var _this = this;
if(selection.length == 0) { // 取消全选
var arrLength = _this.pager.total/_this.pager.curPage;
for(var k = (_this.pager.curPage - 1) * _this.pager.curSize;
k < arrLength; k++) {
_this.dtlEditTableData.forEach(function(i,index) {
if(i.poId == _this.tableData[k].poId) {
_this.dtlEditTableData.splice(index, 1);
}
});
}
}else { // 全选
selection.forEach(function(item){
if(!_this.isExistRow(_this.dtlEditTableData, item, 'poId')) {
_this.dtlEditTableData.push(item);
}
});
}
},
// 勾选或取消勾选时调用
handleSelect: function handleSelect(selection, row) {
// 判断当前点击的是打钩还是取消打钩 true 则是打勾
var isSelected = this.isExistRow(selection, row, 'poId');
if(isSelected) { // 勾选
if(!this.isExistRow(this.dtlEditTableData, row, 'poId')) {
this.dtlEditTableData.push(row);
}
}else { // 取消勾选
for(var i in this.dtlEditTableData) {
if(this.dtlEditTableData[i].poId == row.poId){
this.dtlEditTableData.splice(i, 1);
}
}
}
},
// 判断 arrs数组中是否存在row 存在则返回true
isExistRow: function isExistRow(arrs, row, field) {
var flag = false;
arrs.forEach(function(item) {
if(row[field] == item[field]) {
return flag = true;
}
});
return flag;
},
.html
<div class="dataBox">
<template v-if="isInit">
<el-tabs size="small" type="border-card">
<el-tab-pane>
<span slot="label"><i class="el-icon-date"></i> 订单明细</span>
<el-table ref="recConfRef" @sort-change="sortChange" :data="tableData" :height="tableHeight/1.2" v-loading="loading" size="mini"
@sort-change="sortChange" style="width: 100%;" @select-all="handleSelectAll" @select="handleSelect" stripe=stripe border=border>
<el-table-column type="selection" align="center" width="55"></el-table-column>
<el-table-column prop="xh" fixed label="序号" type="index" :index="indexCreate" width="50" align="center"></el-table-column>
<el-table-column prop="poNo" fixed label="订单编号" sortable="custom" width="120" sort-by="poNo"></el-table-column>
<el-table-column prop="supName" label="供应商名称" sortable="custom" width="120" sort-by="supName"></el-table-column>
<el-table-column prop="materialNo" fixed label="资材编号" sortable="custom" width="120" sort-by="materialNo"></el-table-column>
<el-table-column prop="singlePartNo" label="固资编号" sortable="custom" width="120" sort-by="singlePartNo"></el-table-column>
<el-table-column prop="materialName" label="资材名称" sortable="custom" width="120" sort-by="materialName"></el-table-column>
<el-table-column prop="materialReplaceNo" label="替代件资材编号" sortable="custom" width="150" sort-by="materialReplaceNo"></el-table-column>
<el-table-column prop="poQty" label="采购数量" sortable="custom" width="120" sort-by="poQty"></el-table-column>
<el-table-column prop="oldRecQty" label="已收货数量" sortable="custom" width="120" sort-by="oldRecQty"></el-table-column>
<!-- <el-table-column prop="recQty" label="本次收货数量" sortable="custom" width="150" sort-by="recQty"></el-table-column>
<el-table-column prop="validityTo" label="有效期至" sortable="custom" width="150" sort-by="validityTo"></el-table-column>
<el-table-column prop="recLocation" label="库位" sortable="custom" width="120" sort-by="recLocation"></el-table-column> -->
<el-table-column prop="siteId" label="在用库位" sortable="custom" width="120" sort-by="siteId"></el-table-column>
<el-table-column prop="useUnit" label="使用单位" sortable="custom" width="120" sort-by="useUnit"></el-table-column>
<el-table-column prop="orderUnit" label="订货单位" sortable="custom" width="120" sort-by="orderUnit"></el-table-column>
<el-table-column prop="unitQty" label="每单位数量" sortable="custom" width="120" sort-by="unitQty"></el-table-column>
<el-table-column prop="isSuite" label="是否套件" fixed="right" sortable="custom" sort-by="isSuite" align="center" width="110">
<template slot-scope="scope">
<el-popover v-if="scope.row.isSuite === '是' " placement="bottom" width="300" height="100" trigger="click">
<el-row>
<el-col :span="24">
<span><b>资材编号: </b></span><span>{{scope.row.materialNo+1}}</span>
<span><b>固资编号: </b></span><span>{{scope.row.fixedMaterialNo+'A1'}}</span>
<span><b>资材名称: </b></span><span>{{scope.row.materialName+'A1'}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<span><b>资材编号: </b></span><span>{{scope.row.materialNo+2}}</span>
<span><b>固资编号: </b></span><span>{{scope.row.fixedMaterialNo+'A2'}}</span>
<span><b>资材名称: </b></span><span>{{scope.row.materialName+'A2'}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<span><b>资材编号: </b></span><span>{{scope.row.materialNo+3}}</span>
<span><b>固资编号: </b></span><span>{{scope.row.fixedMaterialNo+'A3'}}</span>
<span><b>资材名称: </b></span><span>{{scope.row.materialName+'A3'}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<span><b>资材编号: </b></span><span>{{scope.row.materialNo+4}}</span>
<span><b>固资编号: </b></span><span>{{scope.row.fixedMaterialNo+'A4'}}</span>
<span><b>资材名称: </b></span><span>{{scope.row.materialName+'A4'}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<span><b>资材编号: </b></span><span>{{scope.row.materialNo+5}}</span>
<span><b>固资编号: </b></span><span>{{scope.row.fixedMaterialNo+'A5'}}</span>
<span><b>资材名称: </b></span><span>{{scope.row.materialName+'A5'}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<span><b>资材编号: </b></span><span>{{scope.row.materialNo+6}}</span>
<span><b>固资编号: </b></span><span>{{scope.row.fixedMaterialNo+'A6'}}</span>
<span><b>资材名称: </b></span><span>{{scope.row.materialName+'A6'}}</span>
</el-col>
</el-row>
<span class="link-type" slot="reference">{{ scope.row.isSuite }}</span>
</el-popover>
<span v-else>{{ scope.row.isSuite }}</span>
</template>
</el-table-column>
</el-table>
<div class="pageBox">
<el-pagination @size-change="sizeChange" small=small @current-change="currentPageChange" :current-page="pager.curPage"
:page-sizes="pager.sizes" :page-size="pager.curSize" background="true" layout="total, sizes, prev, pager, next, jumper"
:total="pager.total">
</el-pagination>
</div>
</el-tab-pane>
<el-tab-pane label="消息中心">
<span slot="label"><i class="el-icon-date"></i> 收货明细</span>
<el-table :data="dtlEditTableData" size="mini" style="width: 100%;" :height="tableHeight/1.1" stripe=stripe border=border>
<el-table-column prop="xh" label="序号" type="index" :index="indexCreate" width="50" align="center"></el-table-column>
<el-table-column prop="poNo" label="订单编号" width="120"></el-table-column>
<el-table-column prop="materialNo" label="资材编号" width="120"></el-table-column>
<el-table-column prop="singlePartNo" label="固资编号" width="120"></el-table-column>
<el-table-column prop="materialName" label="资材名称" width="120"></el-table-column>
<el-table-column prop="materialReplaceNo" label="替代件资材编号" width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="poQty" label="采购数量" width="120"></el-table-column>
<el-table-column prop="oldRecQty" label="已收货数量" width="150"></el-table-column>
<el-table-column prop="recQty" label="本次收货数量" width="150">
<template slot-scope="scope">
<template>
<el-input size="mini" type="text" v-model="scope.row.recQty"></el-input>
</template>
</template>
</el-table-column>
<el-table-column prop="validityTo" label="有效期至" width="150">
<template slot-scope="scope">
<template>
<el-date-picker clearable v-model="scope.row.validityTo" size="small"
type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd">
</el-date-picker>
<!-- <el-input size="mini" type="text" :value="scope.row.validityTo" v-model="scope.row.validityTo"></el-input> -->
</template>
</template>
</el-table-column>
<el-table-column prop="recLocation" label="库位" width="120">
<template slot-scope="scope">
<template>
<el-input size="mini" type="text" v-model="scope.row.recQty"></el-input>
</template>
</template>
</el-table-column>
<el-table-column prop="siteId" label="在用库位" width="120"></el-table-column>
<el-table-column prop="useUnit" label="使用单位" width="120"></el-table-column>
<el-table-column prop="orderUnit" label="订货单位" width="120"></el-table-column>
<el-table-column prop="unitQty" label="每单位数量" width="120"></el-table-column>
<el-table-column prop="supName" label="供应商名称" width="120" show-overflow-tooltip></el-table-column>
<el-table-column prop="isSuite" label="是否套件" width="120"></el-table-column>
<el-table-column fixed="right" label="操作" width="60" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, dtlEditTableData)" type="text" size="mini">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</template>
</div>
