基于 vue element ui 封装的 X轴标题 Y轴标题 自定义插槽

子组件

<template>
  <div id="tableXY1">
    <table style="width: 100%" class="myTable">
      <tr v-for="(item,index) in column" :key="index">
        <td class="column" :style="{background: item.colorBJ ? item.colorBJ:'#ebeef5'}">
          <span :style="{color: item.colorText ? item.colorText: '#000000'}">
            {{ item.title }}
          </span>
        </td>
        <td class="column" v-for="(itemData,indexData) in tableData" :key="indexData">
          <div v-if="item.value === 'action'">
            <el-button :type="itemAction.showType" @click="handClick(itemAction.clickMethods,itemData)" v-for="(itemAction,indexAction) in item.action" :key="indexAction">{{ itemAction.clickName }}</el-button>
          </div>
          <div v-else>
            <div v-if="item.slot" style="display: inline-flex;">
              <div class="slotMain" v-for="(itemSlot,indexSlot) in item.slot" :key="indexSlot">
                <div v-if="itemSlot.type=== 'button'">
                  <el-button :type="itemSlot.showType" @click="handClick(itemSlot.clickMethods,itemData)">{{ itemSlot.clickName }}</el-button>
                </div>
              </div>
              <div class="slotMain">{{ itemData[item.value] }}</div>
            </div>
            <div v-else>{{ itemData[item.value] }}</div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'TableXY1',
  props: {
    column: {
      type: Array,
      default: function () {
        return [];
      }
    },
    tableData: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data () {
    return {};
  },
  methods: {
    handClick (methods, row) {
      this.$emit('handClick', methods, row);
    }
  }
};
</script>

<style lang="less">
#tableXY1{
  .myTable {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }

  .myTable td, .myTable th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 60px;
    line-height: 60px;
  }
  .slotMain{
    padding:0 4px;
  }
  }
</style>

父组件

<template>
    <tableXY :column="column" :table-data="tableData1" @handClick="handClick" />
</template>
<script>
export default {
  components: { tableXY },
  name: 'Index',
  data () {
    return {
      column: [
        {
          title: '', // 第一个单元格展示的 title
          colorBJ: 'black',
          value: 'nameX' //   第一个对象固定 横轴 标题
        },
        {
          title: '左侧1', // 必传  左侧标题
          value: 'aaaa', // 必传   左侧标题  对应的value
          colorText: '#ffffff', // 非必传  左侧标题当前单元格  字体颜色
          colorBJ: 'red', // 非必传  左侧标题当前单元格 背景颜色
          slot: [ // 自定义必须传数组 暂时只支持 button   非必传
            {
              type: 'button', // 自定义模板类型
              showType: '', // 按钮显示类型  以element  按钮类型 为准
              clickName: '复制', // 按钮展示汉字
              clickMethods: 'copyMethods' // 按钮回调 方法名
            }
          ]
        },
        {
          title: '左侧2',
          colorBJ: 'blue',
          value: 'cccc'
        },
        {
          title: '左侧3',
          value: 'eeee'
        },
        {
          title: '操作', // 操作列  单写  按以下格式  暂时只支持button
          value: 'action', // 必传
          action: [
            {
              type: 'button',
              showType: '',
              clickName: '删除',
              clickMethods: 'delMethods'
            }
          ]
        }
      ],
      tableData1: [
        {
          nameX: '11111',
          aaaa: '值1',
          bbbb: '值b',
          cccc: '值c',
          dddd: '值d',
          eeee: '值e',
          ffff: '值f'
        },
        {
          nameX: '12222',
          aaaa: '值11',
          bbbb: '值bb',
          cccc: '值cc',
          dddd: '值dd',
          eeee: '值ee',
          ffff: '值ff'
        }
      ]
    };
  },
  methods: {
	    handClick (methods, row) {
      		console.log(methods, row);
   		 },
    },
};
</script>