element UI table，自定义表头、row表内容

这是折腾了很久的table（项目使用antdv UI），最终table放弃antdv的table。转而使用element UI的 table解决。

我们的业务需要table表头是实时动态数据（可以操作）、每一行row数据可以属于多个表头的CheckBox选中（CheckBox双向数据绑定v-model，一行数据在不同的表头被选中）。

重点在：

el-table HTML处...
......
<a-checkbox v-else v-model="scope.row[item.id]">
     选择
 </a-checkbox>
 ......

看效果：

上代码：

"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,//该行row(用户管理)被id=1397400604486819111的套餐版本(【默认】试用版)选中
          },
          {
            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>