1.多选表格
<el-link type="primary" @click="toSelectGoods">选择商品</el-link>
<el-dialog
v-el-drag-dialog
class="dialog-box1"
title="选择商品"
width="1000px"
:visible.sync="isGoodsDialog"
:close-on-click-modal="false"
@close="cancelBtn"
>
<div class="">
<el-table
ref="multipleTable"
:data="goodsList"
:header-cell-style="{ background: '#eceef4' }"
@selection-change="handleSelectionChange"
:row-key="getRowKeys"
>
<el-table-column
type="selection"
:reserve-selection="true"
width="55">
</el-table-column>
<el-table-column prop="goodsName" label="商品名称" />
<el-table-column prop="statusFlagText" label="销售状态" />
</el-table>
</div>
<Pagination
:current-page="pageNumber"
:total="totals"
@sizeChange="handleSize"
@currentChange="handleCurrent"
/>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelBtn">取 消</el-button>
<el-button type="primary" @click="selectGoodsBtn">确 定</el-button>
</span>
</el-dialog>
//方法
toSelectGoods() {
this.isGoodsDialog = true;
this.getGoods();
this.handleSelection = [];
this.$nextTick((e) => {
//回显表格选中的项,注意要拿到一行的id,才能匹配回显成功
this.form.goodsStockDtos.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
});
},
getRowKeys(row) {
return row.id
},
handleSelectionChange(row) {
//组件自带的方法,能拿到选中的行的数组形成一个数组
this.handleSelection = [];
this.handleSelection = row || [];
},
selectGoodsBtn(row) {
this.handleSelection.forEach((item) => {
console.log('item=====',item)
this.form.goodsStockDtos.push({
goodsId: item.goodsId,
id : item.id,
goodsName: item.goodsName,
specGroup : item.specGroup,
goodsNo: item.goodsNo,
goodsStockSkuReqs : item.goodsSkus
});
});
//数组去重的万能公式
let obj = {};
this.form.goodsStockDtos = this.form.goodsStockDtos.reduce(function (
item,
next
) {
obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
return item;
},
[]);
this.cancelBtn()
},
cancelBtn() {
this.isGoodsDialog = false
this.handleSelection = []
//清空选中项
this.$refs.multipleTable.clearSelection();
//恢复每次打开弹框显示的是列表的第一页
this.pageNumber = 1;
},
实现效果:
2.表格里面嵌套表格
后端返回的数据结构如图
具体代码如下
<el-table
v-if="dialogType === 1"
:data="addForm.goodsDTOS"
border
stripe
:header-cell-style="{ background: '#eceef4' }"
style="width: 600px"
>
<el-table-column type="expand">
// scopec这都是自定义名字的,这里是父插槽
<template slot-scope="scopec">
<el-table border :data="scopec.row.goodsStockDTOS">
<el-table-column
label="秒杀价格"
:prop="'goodsStockDTOS.' + scopec.$index + '.goodsActivityPrice'"
:rules="[
{
required: true,
message: '请输入秒杀价格',
trigger: 'blur',
},
]"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.goodsActivityPrice"
style="width: 80px"
/>
</template>
</el-table-column>
<el-table-column
prop="subSpecValues"
label="规格"
align="center"
width="50"
/>
<el-table-column
prop="qualifiedNum"
label="库存数量"
align="center"
width="50"
/>
<el-table-column
label="合格数量"
align="center"
width="130"
:prop="'goodsStockDTOS.' + scopec.$index + '.activityNum'"
:rules="[
{
required: true,
message: '请输入活动数量',
trigger: 'blur',
},
]"
>
<template slot-scope="scope">
<el-input
v-model="scope.row.activityNum"
style="width: 80px"
/>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-link
type="primary"
:underline="false"
style="margin-left: 10px"
@click="
firstDetele(scopec.$index, scope.$index, scope.row)
"
>删除</el-link>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="goodsName" label="商品名称" />
<el-table-column prop="warehouseId" label="仓库">
<template slot-scope="scope">
<el-select v-model="scope.row.warehouseId" placeholder="请选择">
<el-option
v-for="item in optionsList"
:key="item.id"
:label="item.warehouseName"
:value="item.id"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<i class="el-icon-delete" @click="delGoods(scope.$index)" />
</template>
</el-table-column>
</el-table>
firstDetele(parIndex, childIndex, row) {
this.addForm.goodsDTOS[parIndex].goodsStockDTOS.splice(childIndex, 1)
},
delGoods(index) {
// this.multipleSelection.splice(index, 1);
this.addForm.goodsDTOS.splice(index, 1)
this.addForm.activityGoodsReqs.splice(index, 1)
},
3.表格合并单元格
要求效果如如图:
后端给的数据如图:
具体实现代码:
<div class="table-box">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
:header-cell-style="{ background: '#eceef4' }"
>
<el-table-column prop="goodsName" label="商品名称" />
<el-table-column prop="goodsNo" label="商品编码" />
<el-table-column prop="warehouseName" label="仓库" />
<el-table-column prop="subSpecValues" label="规格" />
<el-table-column prop="qualifiedNum" label="合格数量" />
<el-table-column prop="unqualifiedNum" label="残损数量" />
<el-table-column prop="wreckNum" label="折损数量" />
<el-table-column prop="test" label="未发货数量" />
<el-table-column prop="activitySum" label="活动库存" />
<el-table-column label="操作" fixed="right" width="100px">
<template slot-scope="spoce">
<el-button
size="mini"
type="primary"
plain
@click="NavtostockData(spoce.row.goodsNo)"
>查看流水</el-button>
</template>
</el-table-column>
</el-table>
//1.接受到后端返回的值后开始数据处理
getList() {
getStockList(
Object.assign(this.selectForm, {
pageNum: this.pageNum,
pageSize: this.pageSize
})
).then((res) => {
const arr = []
this.tableData = res.data.content
this.tableData.forEach(e => {
e.goodsStockSkuDTOS.forEach(item => {
arr.push({
goodsNo: e.goodsNo,
goodsName: e.goodsName,
goodsId: e.goodsId,
warehouseName: e.warehouseName,
warehouseId: e.warehouseId,
activitySum: e.activitySum,
goodsStockSkuDTOS: e.goodsStockSkuDTOS,
unqualifiedNum: item.unqualifiedNum,
subSpecValues: item.subSpecValues,
qualifiedNum: item.qualifiedNum,
wreckNum: item.wreckNum
})
})
})
this.tableData = arr.map(item => { return item })
this.getSpanArr(this.tableData)
this.total = res.data.totalElements
// 合并行
getSpanArr(data) {
this.spanArr = []
// data就是我们从后台拿到的数据
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].goodsId === data[i - 1].goodsId) {
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
}
console.log(this.spanArr)
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
console.log('columnIndex==================', columnIndex)
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 8 || columnIndex === 9) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
console.log(`rowspan:${_row} colspan:${_col}`)
return {
// [0,0] 表示这一行不显示, [2,1]表示行的合并数
rowspan: _row,
colspan: _col
}
}
},
4.拖拽表格
import Sortable from 'sortablejs'
mounted() {
this.$nextTick(() => {
this.rowDrop()// 行拖拽
})
},
// 表格拖拽 行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({ newIndex, oldIndex }) {
if (newIndex == oldIndex) return
_this.selList.splice(
newIndex,
0,
_this.selList.splice(oldIndex, 1)[0]
)
var newArray = _this.selList.slice(0)
_this.selList = []
_this.$nextTick(function() {
_this.selList = newArray
// let ids = _this.selList.map(e => {
// return { id: e.id || null }
// })
// ids = ids.filter(e => e.id !== null)
// console.log(ids)
// goodsSort({ ids }).then(res => {
// this.$message.success('拖拽排序成功!')
// this.getList()
// })
})
}
})
},
5.表格定位
elementUI中的el-table 实现自动滚动到指定行,同时修改高亮颜色功能——技能提升
6.合并多列 blog.csdn.net/achabuhecha…