el-table的二次封装

子组件

<template>
  <keep-alive>
    <el-table :data="tableData" @cell-dblclick="copyText" tooltip-effect="light">
      <slot name="selection"></slot>
      <el-table-column v-for="item in tableLabel" :key="item.value" :prop="item.value" :label="item.label"
        :width="item.width ? item.width : '' " :formatter="item.formatter" :show-overflow-tooltip="true"
        :custom="item.copyable">
      </el-table-column>
      <slot name="operation"></slot>
    </el-table>
  </keep-alive>
</template>

<script>
export default {
  props: {
    tableLabel: {
      type: Array,
      required: true,
      default () {
        return []
      },
    },
    id: {
      type: String,
      required: true,
      default () {
        return String
      },
    },
    tableData: {
      type: Array,
      required: true,
      default () {
        return []
      },
    },
    copyText: {
      type: Function,
      default: () => {
        return Function;
      },
    }
  },
  methods: {

  },
}
</script>

<style scoped>
::v-deep .cell .el-tag {
  margin-right: 5px !important;
}
::v-deep .el-button {
  padding: 5px 0;
}
::v-deep .el-table__cell {
  padding: 10px 0 !important;
}
</style>

在父组件里使用

<template>
  <div>
    <gem-tables :id="'accountSettingTabsFour'" :tableLabel="accountSettingFourTableLabel"
      :tableData="accountSettingTabsFourData" :copyText="homeCopyText">
      <el-table-column label="操作" slot="operation">
        <template slot-scope="scope">
          <el-button ondblclick="false" type="text">明细</el-button>
        </template>
      </el-table-column>
    </gem-tables>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {
      copyable: { copyText: '复制', copiedText: '已复制', timeout: 2000 },
      accountSettingFourTableLabel: [
        { label: '名称', value: 'name' },
        { label: '配置', value: 'configInfo', formatter: this.formatAge },
        { label: '描述', value: 'description' }
      ],
      accountSettingTabsFourData: [
        {
          name: 1,
          configInfo: 1,
          description: '是法国岁的法国岁的法国岁的法国是'
        },
        {
          name: 1,
          configInfo: 1,
          description: '是法国岁的法国岁的法国岁的法国是'
        },
        {
          name: 1,
          configInfo: 100,
          description: '是法国岁的法国岁的法国岁的法国是'
        },
        {
          name: 1,
          configInfo: 1,
          description: '是法国岁的法国岁的法国岁的法国是'
        },
        {
          name: 1,
          configInfo: 1,
          description: '是法国岁的法国岁的法国岁的法国是是法国岁的法国是是法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国岁的是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国是是法国岁的法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是是法国法国岁的法国岁的法国是是法国岁的法国岁的法国岁的法国是'
        },
      ]
    }
  },
  methods: {
    formatAge (row) {
      let type = '';
      if (row.configInfo >= 18) {
        type = 'success';
      } else {
        type = 'warning';
      }
      return [this.$createElement('el-tag', { props: { type: type, size: "mini" } }, `${row.configInfo} 岁`), this.$createElement('el-tag', { props: { type: type, size: "mini" } }, `${row.configInfo} 岁`)];
    },
    homeCopyText (row, column, cell, event) {
      if (column.label == '描述') {
        this.$copyText(row, column, cell, event)
      }
    }
  },
}
</script>

<style lang="scss" scoped>
</style>

双击复制

function copyText (row, column, cell, event) {
  // 双击复制
  let save = function (e) {
    e.clipboardData.setData('text/plain', event.target.innerText);
    e.preventDefault();  //阻止默认行为
  }
  document.addEventListener('copy', save);//添加一个copy事件
  document.execCommand("copy");//执行copy方法
  this.$message({ message: '复制成功', type: 'success' })//提示
}

App.vue(不要添加scoped)

<style lang="scss">
.el-tooltip__popper {
  max-width: 35%;
}
</style>