封装element的table组件(1)

·  阅读 377

谈谈element的table组件二次封装,之前也封装过一次,但真的太差了,所以再重新封装一次,记录一下。如有错误恳请指正

image.png

主要包括了以下几个功能

  1. 表格分页
  2. 筛选列
  3. 查询

表格

参数内容

参数说明默认值,类型
tableData表格数据[]
columnList列数据[]
tableNameref属性string
showExpand展示详细信息false,boolean
allowSelect允许多选false,boolean
showSort展示序号true,boolean
hasOption是否有操作true,boolean
total数据总数1,number

column参数

参数说明
label标签名
prop对应字段名
filter筛选
formatter格式转换
child复合表格

方法说明

方法名称说明参数
filter-change表头筛选data,[]
page-change页码选择{type:('page','size'),value}
select-all全选按钮data
select-one单选一条数据data
// Table组件
<el-table
    :data="tableData" // 表单数据
    @filter-change="filterChangeMethod" // 表头下拉筛选
    :hide-on-single-page="true"
    :ref="tableName"
    border
    @select-all="selectAllMethod" // 表头全选按钮
    @select="selectOneMethod" // 选择单条数据
    style="width: 100%; margin-top:20px;">
</el-table>
复制代码

showExpand

// Table组件
<el-table-column v-if="showExpand" type='expand'>
  <template #default="scope"> // 原有element设置的
    <slot name="expand" :scope="scope"></slot> // 自定义内容插槽
  </template>
</el-table-column>
复制代码
// 用法
<template #expand="{ scope }">
  <div>
    测试123123{{scope.row.age}}
  </div>
</template>
复制代码

allowSelect

// Table组件
<el-table-column
  v-if="allowSelect"
  type='selection'>
</el-table-column>

<script>
// 对应选择操作
// 全选操作
const selectAllMethod = (data) => {
  emit('select-all', data);
};

// 单选操作
const selectOneMethod = (data) => {
  emit('select-one', data);
};
</script>
复制代码

showSort

// Table组件
<el-table-column
  v-if="showSort"
  type='index'
  label="序号"
  :index="count"
  width="50%">
</el-table-column>

<script>
// 序号排序功能(序号连续性)
const count = (index) => (state.tempPage - 1) * state.tempPageSize + index + 1;
</script>
复制代码

hasOption

// Table组件
<el-table-column
  fixed="right"
  label="操作"
  v-if="hasOption">
  <template #default="scope">
    <slot :scope="scope" name="option"></slot>
  </template>
</el-table-column>
复制代码
// 用法
<template #option="{ scope }">
  <el-button @click="detail(scope)">详情</el-button>
</template>
复制代码

内容显示(多级表头的设置)

// Table组件
<CColumn
  :contentData="item"
  v-for="(item,index) in columnListResult"
  :key="index">
  <template #content="{data}">
    <slot :scope="data" :name="item.prop"></slot>
  </template>
</CColumn>
复制代码
// Column组件
没有子列表
<el-table-column
    :label="contentData.label"
    :filters="contentData.filter"
    :column-key="contentData.prop"
    filter-placement="bottom-end"
    :filter-multiple="false"
    :formatter="contentData.formatter"
    v-if="!contentData.child">
    // v-if="!contentData.formatter" 如果属性设置formatter直接走element原有的formatter设置
    <template #default="scope" v-if="!contentData.formatter">// element自定义行显示内容
      <slot :data="scope" name="content">
        {{scope.row[contentData.prop] || '--'}}
      </slot>
    </template>
</el-table-column>

<el-table-column
    :label="contentData.label"
    :filters="contentData.filter"
    :column-key="contentData.prop"
    filter-placement="bottom-end"
    :filter-multiple="false"
    :formatter="contentData.formatter"
    v-if="contentData.child">
    <CColumn :contentData="item" v-for="(item,index) in contentData.child" :key="index" />// 递归展示内容
</el-table-column>
复制代码
// 内容自定义用法
<template #status="{ scope }">// slot的name是prop的值
  <el-button v-if="scope.row.status === 1">在职</el-button>
  <el-button v-if="scope.row.status === 0">离职</el-button>
</template>

// 列属性
[{
  label: 'SUM',
  child: [
    {
      label: 'NAME',
      prop: 'name',
    },
  ],
},
{
  label: 'AGE',
  prop: 'age',
  formatter: (scope) => scope.age + 2,
},
{
  label: 'STATUS',
  prop: 'status',
  filter: [
    { text: 'ON', value: 'on' },
    { text: 'OFF', value: 'off' },
  ],
},]
复制代码

分页设置

用的还是element的分页组件

// Page组件
<el-pagination
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :current-page="currPage"
    :page-size="currPageSize"
    :page-sizes="pageSizes"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange">
</el-pagination>

<script>
// 把页数、数量放在同一个函数里面判断执行
const handleCurrentChange = (value) => {
  emit('page-change', { type: 'page', value });
};

const handleSizeChange = (value) => {
  emit('page-change', { type: 'size', value });
};
</script>
复制代码
// Table组件
<CPage
    @page-change="pageChangeMethod"
    v-if="showPage">
</CPage>

<script>
// 分页选择
const pageChangeMethod = (data) => {
  const { type, value } = data;
  if (type === 'page') {
    state.tempPage = value;
  }
  if (type === 'size') {
    state.tempPageSize = value;
  }
  emit('page-change', data);
};
</script>
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改