在vue中优雅使用JSX，简单二次封装element-table

在vue中优雅使用JSX，简单二次封装element-table

先大概写一下，尔后闲了再润色

JSX语法

vue-cli已内置支持JSX语法，无需再配置；和React中的写法一致。

{
    title: '操作',
    minWidth: '210',
    render: (h, p) => {
        let detailBtn = <el-button size="mini" onClick={() => this.handleDetail(p.index, p.row)}>详情</el-button>
        let editBtn = <el-button size="mini" type="warning" onClick={() => this.handleEdit(p.index, p.row)}>修改</el-button>
        return (
            <div>{detailBtn}{editBtn}</div>
        )
    }
},

element table封装

<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      size="medium"
      fit
      :header-cell-style="{height: '50px',padding: '0',background: '#f7f9fa','font-size': '14px',color: '#8590a6'}"
      :row-style="{'font-size': '13px',color: '#212121'}"
      border
      @selection-change="handleSelectionChange"
    >
      <slot />
      <el-table-column
        v-for="(item, uniqueKey) in tableHeader"
        :key="item._id || uniqueKey"
        :prop="item.key"
        :label="item.title"
        :fixed="item.fixed"
        :min-width="item.minWidth"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <ex-slot
            v-if="item.render"
            :render="item.render"
            :row="scope.row"
            :index="scope.$index"
            :column="item"
          />
          <span v-else v-html="getRenderContent(scope.row[item.key])" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="text-align: center;margin:20px 0;"
      :current-page="pager.pageNumber"
      :page-size="pager.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      :total="pager.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) {
      params.column = data.props.column
    }
    return data.props.render(h, params)
  }
}
export default {
  name: 'CommonTable',
  components: { exSlot },
  props: {
    // 表格数据
      tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 分页数据
    pager: Object,
    // 表头数据
    tableHeader: {
      type: Array,
      default: function() {
        return []
      }
    }
  },

  methods: {

    /**
     * @description 多选
     * @param {Object} val 传给父组件多选结果后的id数组
     */
    handleSelectionChange(val) {
      this.$emit('batchChoice', val)
    },

    /**
     * @description 点击分页切换时触发
     * @param {Object} -val 传给父组件当前的页码对象
     */
    handleCurrentChange(val) {
      this.pager.pageNumber = val
      this.$emit('handleCurrentChange', this.pager)
    },

    /**
     * @description 更改一页展示多少条数据时触发
     * @param {Object} -val 传给父组件当前设置的每页展示多少条数据
     */
    handleSizeChange(val) {
      this.pager.pageSize = val
      this.$emit('handleSizeChange', this.pager)
    },
    // 显示单元格内数据，兼容内容为0的时候正常显示
    getRenderContent(content) {
      if (content) {
        return content
      } else if (content === 0) {
        return 0
      } else {
        return '-'
      }
    }

  }
}
</script>

<style>
.el-tooltip__popper{
  max-width:20vw;
  line-height: 1.5;
}
</style>