m-table m-table-column

介绍

本组件是对 el-table 二次封装，增加默认值 stripe、 border、highlightCurrentRow 等属性；改写 @sort-change 事件的返回参数，如 ascending 改为 asc，descending 改为 desc， 以使其返回结构与后端 api 接口参数一致。

目录结构

...
└─ src
   └─ components
      └─ MTable              # 表格
         ├─ index.js         # 注册入口
         ├─ index.vue        # 表格组件
         ├─ column           # m-table-column
         └─ poster           # 表格中海报图
...

使用注释

/**
 * m-table
 * @module components/MTable
 * @desc 对 element-ui 的 el-table 组件二次封装
 * @param {array} data - 显示的数据，同el-table
 * @param {string, number} [height] - table 高度
 * @param {boolean} [stripe] - 是否为斑马纹 table，默认值 true
 * @param {boolean} [border] - 是否带有纵向边框，默认值 true
 * @param {boolean} [highlightCurrentRow] - 是否要高亮当前行，默认值 true
 * @param {object} [sort] - 手动对 Table 进行排序，同 el-table
 * @param {string} [sort.sortby] - 排序字段
 * @param {string} [sort.order] - 排序顺序，asc，desc
 * @param {string} [sortby] - 调用后端排序的字段，逗号分隔，对el-table的sortby方法进行了改写
 * @param {function} [spanMethod] - 合并行或列的计算方法，同 el-table
 * 
 * @example
 * <m-table v-loading="loading"
 *   :data="list"
 *   :sort.sync="sort"
 *   @sort-change="getData(true)"
 *   sortby="year, vote_count"
 * >
 *    <m-table-column>...</m-table-column>
 * </m-table>
 */

源码

<template>
  <el-table
    :data="data"
    :sort="sort"
    :border="border"
    :stripe="stripe"
    :height="height"
    :highlight-current-row="highlightCurrentRow"
    @sort-change="sortChangeHandle"
    :span-method="spanMethod"
    :sortby="sortby"
  >
    <slot />
  </el-table>
</template>

export default {
  name: "MTable",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    height: {
      type: [String, Number],
      default: "100%",
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: true,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: true,
    },
    spanMethod: {},
    sort: {},
    sortby: {},
  },
  methods: {
    sortChangeHandle({ column, prop, order }) {
      const orderby = order
        ? order === "ascending"
          ? "asc"
          : order === "descending"
          ? "desc"
          : order
        : order;

      // 如果是多级属性，则取最后一个
      // e.g movie.year 取 year
      if (prop) {
        prop = prop.split(".")[prop.split(".").length - 1];
      }

      this.$emit("update:sort", { sortby: prop, order: orderby });

      this.$emit("sort-change", { column, prop, order });
    },
  },
};

m-table-column

与 m-table 配套使用，替代 el-table-column，设置默认 align="center", header-align="center"，增加 lineClamp 属性，可设置内容显示行数。

/**
 * m-table
 * @module components/MTable/column
 * @desc 对 element-ui 的 el-table-column 组件二次封装，只可在el-table中使用
 * @param {string} prop - 对应列内容的字段名，也可以使用 property 属性
 * @param {string} label - 显示的标题
 * @param {boolean, string} [sortable] - 对应列是否可以排序
 * @param {boolean} [width] - 对应列的宽度
 * @param {boolean} [minWidth] - 对应列的最小宽度
 * @param {object} [align] - 对齐方式，默认值为 center
 * @param {object} [headerAlign] - header 对齐方式，默认值为 center
 * @param {string} [fixed] - 列是否固定在左侧或者右侧，true 表示固定在左侧
 * @param {string} [showOverflowTooltip] - 当内容过长被隐藏时显示 tooltip
 * @param {string} [className] - 自定义类名
 * @param {number} [lineClamp] - 超过指定行数后显示... 默认值4
 * 
 * @example
 * <m-table-column prop="name" label="列名" width="160" />
 */