这是折腾了很久的table（项目使用antdv UI），最终table放弃antdv的table。转而使用element UI的 table解决。
我们的业务需要table表头是实时动态数据（可以操作）、每一行row数据可以属于多个表头的CheckBox选中（CheckBox双向数据绑定v-model，一行数据在不同的表头被选中）。
看效果：
上代码：
"ant-design-vue": "^1.6.5",
"element-ui": "^2.15.1",
<template>
<div>
<page-header-wrapper :title="spuName">
<!-- 操作 -->
<template v-slot:extra>
<a-button-group style="margin-right: 4px;">
<a-button type="default" icon="swap-left" @click="showBack">返回上级</a-button>
</a-button-group>
<a-button-group style="margin-right: 4px;">
<a-button type="default" @click="resetTable">重置表单</a-button>
</a-button-group>
<a-button-group style="margin-right: 4px;" v-if="$auth('goods:sku:edit')">
<a-button type="primary" @click="showModal2profuncAll">批量定价策略（功能模块）</a-button>
</a-button-group>
<a-button-group style="margin-right: 4px;" >
<a-button type="primary" @click="showModal2flowSpace">资源产品定价</a-button>
</a-button-group>
<a-button-group style="margin-right: 4px;" v-if="$auth('goods:meal:add')">
<a-button type="primary" icon="plus" @click="showModal2mealFuncAdd">新增套餐</a-button>
</a-button-group>
<a-button type="primary" @click="saveMealSpecValues">保存修改（套餐）</a-button>
</template>
<a-card style="margin-top:20px;margin-bottom: 20px;" class="cancelpadding">
<el-table
ref="multipleTable"
@selection-change="handleSelectionChange"
v-loading="loading"
element-loading-spinner="el-icon-loading"
:data="data">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item,index) in columns"
:key="item.id"
:prop="item.name"
:width="index > 1 ? (index == (columns.length -1) ? 410 : 260) : 180">
<!-- 表体：产品菜单 -->
<template slot-scope="scope">
<span v-if="index < 2">
<!-- 产品功能属性 （规格）-->
<a v-if="index == 1"><a @click="showModal2profuncSetting(scope.row)" v-if="$auth('goods:sku:edit')">设置</a>
<a-divider type="vertical" /><a @click="showModal2profunc(scope.row)" v-if="$auth('goods:sku:edit')">定价</a></a>
<!-- 被默认配置勾选的板块，操作框内设置默认下架 -->
<a v-else>{
{
scope.row.name}}</a>
</span>
<a-checkbox v-else v-model="scope.row[item.id]">
选择
</a-checkbox>
</template>
<!-- 表头：版本 -->
<template slot="header" slot-scope="scope">
<span>{
{
item.name}}</span>
<span v-if="index > 1">
<a-button size="small" style="margin-left:5px" @click="showModal2mealFuncSetting(item)" v-if="$auth('goods:meal:edit')">设置</a-button>
<a-button size="small" style="margin-left:5px" @click="showModal2mealFunc(item)" v-if="$auth('goods:meal:edit')">定价</a-button>
<a-button size="small" style="margin-left:5px" v-if="$auth('goods:meal:remove')" @click="showModal2mealFuncDelete(item)">删除</a-button>
</span>
</template>
</el-table-column>
</el-table>
</a-card>
<!-- 分页 -->
<a-pagination
v-model="pagination.pageNum"
:show-total="total => `共 ${pagination.total} 条`"
:total="pagination.total"
show-size-changer style="position: absolute;right: 0;"
@change="change"
:defaultPageSize="pagination.defaultPageSize"
:pageSizeOptions="pagination.pageSizeOptions"
@showSizeChange="showSizeChange"/>
</page-header-wrapper>
</div>
</template>
<script>
import {
getTableData} from '@/utils/pageUtil.js'
import Vue from 'vue'
import {
FormModel
} from 'ant-design-vue'
Vue.use(FormModel)
export default {
data () {
return {
loading: true,
//分页相关
pagination: {
pageSizeOptions: ['10', '20', '30', '40', '50'],
defaultPageSize:10,
pageSize:10,
pageNum:1,
orderByColumn:'id',
isAsc:'desc',
//总大小
total:0,
showSizeChanger: true,
showTotal: total => `共 ${
total} 条`, // 显示总数
},
priceTip:'',
//定价类型，-1、未知，0、功能模块，1、套餐版本，2、select的功能模块
priceTipType:-1,
//功能模块
profuncTip:'',
//套餐版本
mealFuncTip:'',
//套餐版本类型，-1、未知，0、新增，1设置
mealFuncTipType:-1,
spuName:'',
spuId:0,
multipleSelection: [],
selectedRowKeys: [],
selectedRows: [],
value: '',
visible: false,
visible2: false,
visible3: false,
visible4: false,
labelCol: {
span: 4
},
wrapperCol: {
span: 18
},
//产品功能（菜单all）
dataAll:[
{
id: '1397400603849285634',
name: '用户管理',
'1397400604486819111':true,//该产品功能（菜单）被id=1397400604486819222的套餐版本选中
},
{
id: '1397400604293881858',
name: '订单管理',
'1397400604486819111':true,
},
{
id: '1397400604486819841',
name: '财务管理',
'1397400604486819111':true,
}
],
//产品功能（菜单）
data:[],
//套餐版本,从1、2之后
columns:[
{
id:'1',
name: '功能模块',
},
{
id:'2',
name: '操作',
},
//开始版本
{
id:'1397400604486819111',
name:"【默认】试用版",
},
{
id:'1397400604486819222',
name:"基础版",
},
{
id:'1397400604486819333',
name:"标准版",
},
{
id:'1397400604486819444',
name:"高级版",
}
]
}
},
created () {
// console.log('接收路由spuId参数：', this.$route.params.spuId)
this.spuName = this.$route.params.spuName
this.spuId = this.$route.params.spuId
this.init()
},
methods: {
init(){
//模拟获取数据
setTimeout(()=>{
this.pagination.total = this.dataAll.length
this.getTableDataFunc()
},1000)
},
getTableDataFunc(){
// console.log(this.pagination.pageNum,this.pagination.pageSize,this.dataAll,getTableData);return;
this.loading = true
this.data = getTableData(this.pagination.pageNum,this.pagination.pageSize,this.dataAll).data
this.loading = false
console.log(this.data)
},
//重置表单
resetTable(){
this.$refs.multipleTable.clearSelection();
this.data.forEach((item,index)=>{
console.log(item)
for(let initem in item){
if(item[initem] == true && item.hasOwnProperty(initem)){
item[initem] = false}
}
})
},
//table cehckbox 选择
handleSelectionChange(val) {
this.multipleSelection = val;
console.log('handleSelectionChange',this.multipleSelection)
console.log('data',this.data)
},
//************************************************分页***************************************
//分页-pageNum
change(page, pageSize){
console.log(page, pageSize)
this.pagination.pageNum = page
this.pagination.pageSize = pageSize
this.getTableDataFunc()
},
//分页-pageSize
showSizeChange(current, size){
console.log(current, size)
this.pagination.pageNum = current
this.pagination.pageSize = size
this.getTableDataFunc()
},
//************************************************套餐版本***************************************
//套餐版本-定价
showModal2mealFunc (row4meal) {
this.visible2 = true
console.log('套餐版本-定价',row4meal)
//定价类型，-1、未知，0、功能模块，1、套餐版本，2、select的功能模块
this.priceTip = `${
row4meal.name}-定价`
this.priceTipType = 1
},
//套餐版本-setting设置
showModal2mealFuncSetting (row4meal) {
this.visible = true
console.log('套餐版本-setting设置',row4meal)
//套餐版本
this.mealFuncTip = `${
row4meal.name}-设置`
//套餐版本类型，-1、未知，0、新增，1设置
this.mealFuncTipType = 1
},
//新增套餐
showModal2mealFuncAdd () {
this.visible = true
console.log('套餐版本-新增套餐')
//套餐版本
this.mealFuncTip = `新增套餐`
//套餐版本类型，-1、未知，0、新增，1设置
this.mealFuncTipType = 0
},
//套餐版本-删除
showModal2mealFuncDelete(row4meal){
console.log('套餐版本-删除')
this.$message.success(`套餐版本-删除！${
row4meal.name}`);
},
//************************************************产品***************************************
//产品功能-定价
showModal2profunc (row) {
this.visible2 = true
console.log('产品功能-定价',row)
//定价类型，-1、未知，0、功能模块，1、套餐版本，2、select的功能模块
this.priceTip = `${
row.name}-定价`
this.priceTipType = 0
},
//产品功能-setting设置
showModal2profuncSetting (row) {
this.visible3 = true
console.log('产品功能-setting设置',row)
//功能模块
this.profuncTip= `${
row.name}-设置`
},
//功能模块批量定价策略
showModal2profuncAll () {
this.visible2 = true
console.log('功能模块批量定价策略')
//定价类型，-1、未知，0、功能模块，1、套餐版本，2、select的功能模块
this.priceTip = `功能模块批量定价策略-定价`
this.priceTipType = 2
},
//************************************************资源flow、space***************************************
//资源产品定价
showModal2flowSpace () {
this.visible4 = true
console.log('产品功能-定价')
},
//***************************************************保存*************************************
//保存修改套餐
saveMealSpecValues(){
console.log('保存修改套餐')
this.$message.success(`保存修改套餐！`);
},
//************************************************逻辑***************************************
//返回上级
showBack () {
this.$router.push({
path: '/product/SAAS/Prolist'
})
},
}
}
</script>
<style>
.price-input {
display: inline-block;
width: 150px;
margin-left: 20px;
}
</style>
转载：https://blog.csdn.net/HSJ0170/article/details/117297200
查看评论