element 表格table二次封装

table表格二次封装 便捷使用。

子组件如下：

<template>
  <div class=''>
    <el-table :data="list" @selection-change="handleSelectionChange" tooltip-effect="dark">
      <el-table-column align="center" v-if="option.mutiSelect" type="selection" style="width: 55;">
      </el-table-column>
      <template v-if="typeUrl === true">
        <template v-for="(item, index) in columns">
          <el-table-column v-if="item.formatUrl !== true" :prop="item.prop" :key='index' :label="item.label"></el-table-column>
          <el-table-column v-if="item.formatUrl === true" :key='index' :label="item.label" class-name="table-hidden-info">
            <template slot-scope="{row}">
              <el-popover trigger="hover" placement="top" v-if="row.url">
                <p>{{ formatUrl(row.url) }}</p>
                  <div slot="reference" class="name-wrapper ellipsis">{{ formatUrl(row.url) }}</div>
              </el-popover>
            </template>
          </el-table-column>
        </template>
      </template>
      <template v-else>
        <template v-for="(item, index) in columns">
          <el-table-column :prop="item.prop" :key='index' :label="item.label"></el-table-column>
        </template>
      </template>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template slot-scope="scope">
          <el-dropdown @command="handleCommand(scope.row, $event)">
            <span class="el-dropdown-link">
                      更多操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in operates" :command="item.command" :key="index">{{item.label}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'minTable',
  props: ['list', 'columns', 'operates', 'option', 'typeUrl'],
  methods: {
    handleCommand (obj, type) {
      this.$emit('handleCommand', obj, type)
    },
    handleSelectionChange (val) {
      console.log(val)
    },
    formatUrl (url) {
      try {
        // let data = JSON.parse(url)
        return JSON.parse(url).join(',')
      } catch {
        return url
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-table {
  /deep/ {
    .table-hidden-info .cell {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>

子组件的应用：

<template>

  <div class='test'>

    <el-card class="table_card">

      <min-table :list="list" :columns="columns" :operates="operates" :typeUrl="typeUrl" :option="option" @handleCommand="handleCommand">

      </min-table>

    </el-card>

  </div>

</template>

<script>
import { getList } from '@/api/dataConnection'
import minTable from '@/layout/components/minTbale.vue'
export default {
  components: { minTable },
  data () {
    return {
      // 表类型区别
      typeUrl: true,
      // 全选
      option: {
        mutiSelect: 'true'
      },
      // 操作按钮
      operates: [
        {
          command: 'modify',
          label: '管理'
        },
        {
          command: 'delete',
          label: '发布'
        },
        {
          command: 'view',
          label: '编辑'
        }
      ],
      // 表头
      columns: [
        {
          prop: 'name',
          label: '资源名称',
          align: 'center'
        },
        {
          prop: 'type',
          label: '资源类型',
          align: 'center'
        },
        {
          prop: 'url',
          label: '访问地址',
          align: 'center',
          formatUrl: true
        },
        {
          prop: 'createDate',
          label: '创建时间',
          align: 'center'
        }
      ],
      // 列表
      list: []
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
// 获取list
    getTableData () {
      let { pageNum, pageSize } = this.pageData
      let data = {
        pageNum,
        pageSize,
      };
      getList(data)
        .then((res) => {
          let {
            data: { list, total },
          } = res.data;
          list.map((item) => {
            item.createDate = this.$moment(item.createDate)
              .format("YYYY-MM-DD HH:MM");
          });
          this.list = list;
          this.pageData.total = total;
          this.tableLoading = false;
        })
        .catch(() => {});
    },
    handleCommand (obj, type) {
        console.log(obj, 222, type)
    },
  }
}
</script>

实现的效果: