封装自定义表格组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了封装自定义表格组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

技术栈： vue2.0 +js +webpack
需求： 封装数据渲染的动态表格组件
1.实现字典表的转译
2.排序号的自动编译
3.自定义字段
4.操作栏的自定义

封装组件代码：

<template>
  <el-table
    v-loading.fullscreen.lock="loading"
    ref="multipleTable"
    :data="list"
    v-bind="$attrs"
    :header-cell-style="{ background: '#eceef4' }"
    @sort-change="sortChange"
    :border="true"
    :stripe="true"
    class="eltabbox"
    :height="'100%'"
    :row-class-name="tableRowClassName"
    element-loading-background="rgba(0, 0, 0, 0.4)"
    element-loading-text="Loading"
  >
    <template slot="empty">
      <EmptyData />
    </template>
    <el-table-column
      :key="Math.random()"
      v-if="showIndex"
      width="80"
      :align="'center'"
      label="排序号"
      fixed="left"
    >
      <template slot-scope="scope">
        <span class="column-index">{{ scope.row.tempIndex + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column
      v-for="column in normalColumns"
      :key="Math.random()"
      :prop="column.prop"
      :label="column.label"
      :align="column.align"
      :width="column.width"
      :sortable="sortFun(column.prop)"
      :sort-orders="['descending', 'ascending', null]"
    >
      <template #default="scope">
        <!-- 自定义字段-->
        <template v-if="column.html">
          <div v-html="column.html(scope.row, column)"></div>
        </template>
        <!--字典转换--->
        <template v-else-if="column.dictionary">
          <span>
            {{ changeDict(column.dictionary, scope.row[column.prop]) }}
          </span>
        </template>
        <span v-else>{{ scope.row[column.prop] }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="showAction" :key="Math.random()">
      <template #default="scope">
        <slot v-bind="scope" name="actionSlot"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
//表格的整体高度为100% 需要在最外一层进行高度的给定
import EmptyData from "@/components/EmptyData";
export default {
  name: "BaseTable",
  components: {
    EmptyData
  },
  props: {
    // 数据列表
    list: {
      type: Array,
      default: () => []
    },
    // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
    columns: {
      type: Array,
      default: () => []
    },
    sortList: {
      // 需要开启排序的列
      type: Array,
      default: () => {
        return [];
      }
    },
    showAction: {
      type: Boolean,
      default: false
    },
    showIndex: {
      //是否显示排序号
      type: Boolean,
      default: false
    },
    //加载
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      normalColumns: this.columns.filter(item => !item.type),
      sortType: {
        ascending: "asc",
        descending: "desc"
      }
    };
  },
  methods: {
    sortChange(column) {
      let order = sortType[column.order];
      const sortParam = order
        ? { sort_key: column.prop, sort_order: order }
        : {};
      console.log("---sortParam----", sortParam);
      this.$emit("sortChange", sortParam);
    },
    sortFun(val) {
      const temp = this.sortList.find(item => {
        return item === val;
      });
      return temp ? "custom" : false;
    },

    //字典转译
    changeDict(arr, val) {
      const list = arr.find(item => item.code === val);
      return list.name || "-";
    },
    tableRowClassName(row, index) {
      // 给每条数据添加一个索引
      row.row.tempIndex = row.rowIndex;
    }
  }
};
</script>

组件的使用：

<template>
  <div class="base-table">
    自定义表格的封装 + 页签组件 + 操作栏
    <BaseTable :columns="columns" :list="tableData" :showAction="true">
      <template #actionSlot="scope">
        <el-button>编辑 / 删除{{ scope.row }}</el-button>
      </template>
    </BaseTable>
  </div>
</template>
<script>
import BaseTable from "@/components/BaseTable";
import { columns, tableData } from "./data";
export default {
  components: {
    BaseTable
  },
  data() {
    return {
      columns,
      tableData,
      total: 30,
      queryParams: {
        pageNo: 1,
        pageSize: 30
      }
    };
  },
  methods: {
    getList() {
      console.log("请求数据", this.queryParams);
    }
  }
};
</script>
<style lang="scss" scoped>
.base-table {
  height: 500px;
  margin-bottom: 100px;
}
</style>

数据：文章来源地址https://www.toymoban.com/news/detail-697723.html

export const columns = [{
    prop: 'text',
    label: '名称',
  },
  {
    prop: 'current',
    label: '本期',
  },
  {
    prop: 'previous',
    label: '上月同期',
  },
  {
    prop: 'lastCurrent',
    label: '去年同期',
  },
  {
    prop: 'currentRatio',
    label: '环比(%)',
    html: (row) => {
      return row.currentRatio < 0 ? `<span style="color: red;">${row.currentRatio}</span>` : row.currentRatio;
    },
  }, {
    prop: 'lastCurrentRatio',
    label: '同比(%)',
    html: (row) => {
      return row.lastCurrentRatio < 0 ? `<span style="color: red;">${row.lastCurrentRatio}</span>` : row.lastCurrentRatio;
    },
  },
]


export const tableData = [{
  text: 11,
  current: 11,
  previous: 'nini',
  lastCurrent: 22,
  currentRatio: 52525,
  lastCurrentRatio: -555
}]

到了这里，关于封装自定义表格组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！