vue3二次封装element-ui中的table组件

为什么要做这件事

借助封装table组件的过程来巩固一下vue3相关知识点。

组件有哪些配置项

1. options:表格的配置项
2. data: 表格数据源
3. elementLoadingText：加载文案
4. elementLoadingSpinner：加载图标
5. elementLoadingBackground：背景遮罩的颜色
6. elementLoadingSvg：加载图标（svg）
7. elementLoadingSvgViewBox：加载图标是svg的话，配置项
8. editIcon：编辑图标
9. isEditRow：是否支持编辑
10. editRowIndex：编辑行的标识符
11. pagination：是否支持分页
12. paginationAlign：分页对齐方式
13. currentPage：当前页数
14. pageSize：每页显示条目个数
15. pageSizes：每页显示个数选择器的选项设置
16. total：总条目数

实现过程

首先，将一个普通的element-plus中的table组件引入进来，表格数据源就是我们通过父组件传递进来的data，所以我们使用defineProps来定义，并且它的数据类型是一个数组；同时我们遵循单向数据流的原则，使用lodash中的深拷贝方法将data拷贝一份出来赋值给变量tableData，将tableData传递给element-plus中的table组件，用来渲染数据。

// 子组件 m-table-copy

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import cloneDeep from 'lodash/cloneDeep'
let props = defineProps({
  data: {
    type: Array,
    required: true
  }
})

// 拷贝一份儿数据
let tableData = ref(cloneDeep(props.data))
</script>

 父组件在使用这个自定义组件的时候应该这么使用：

<!-- 父组件 -->
<template>
  <m-table-copy :data="tableData"></m-table-copy>
</template>

<script setup>
import { ref } from 'vue'

let tableData = ref([])

tableData.value = [
  {
    name: '张三',
    address: '杭州市',
    date: '1998-07-16'
  },
  {
    name: '李四',
    address: '石家庄市',
    date: '2013-09-02'
  }
]
</script>

 这样页面上就能够显示出来我们的数据了：

第一步完成了，我们接着再分析，还有什么是可以封装的呢？仔细看上面的代码，是不是有了想法？是的，label、width、prop这些也是可以放在一个配置项里面的，那我们继续来进行封装：

// 父组件准备好的数据结构
let options = [
  {
    prop: 'date',
    label: '日期',
    align: 'center',
    slot: 'date',
    editable: true,
    width: '230'
  },
  {
    prop: 'name',
    label: '姓名',
    align: 'center',
    slot: 'name'
  },
  {
    prop: 'address',
    label: '地址',
    align: 'center',
    editable: true
  },
  {
    label: '操作',
    align: 'center',
    action: true
  }
]

<template>
  <el-table :data="tableData">
    <template v-for="(item, index) in tableOption" :key="index">
      <el-table-column
        :label="item.label"
        :prop="item.prop"
        :align="item.align"
        :width="item.width" />
    </template>
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'
let props = defineProps({
  // 表格配置项
  options: {
    type: Array,
    required: true
  }
})

// 过滤操作项之后的配置
let tableOption = computed(() => props.options.filter((item) => !item.action))
</script>

 一般来说，表格都会配置一下loading状态，所以我们继续封装，将loading相关的配置项也添加进来：

完整代码 

<template>
  <el-table
    :data="tableData"
    v-loading="isLoading"
    :element-loading-text="elementLoadingText"
    :element-loading-spinner="elementLoadingSpinner"
    :element-loading-svg="elementLoadingSvg"
    :element-loading-svg-view-box="elementLoadingSvgViewBox"
    :element-loading-background="elementLoadingBackground"
    @row-click="rowClick"
    v-bind="$attrs">
    <template v-for="(item, index) in tableOption" :key="index">
      <el-table-column
        :label="item.label"
        :prop="item.prop"
        :align="item.align"
        :width="item.width">
        <template #default="scope">
          <!-- 编辑模式 -->
          <template v-if="scope.row.rowEdit">
            <el-input v-model="scope.row[item.prop]"></el-input>
          </template>
          <template v-else>
            <template v-if="scope.$index + scope.column.id === currentEdit">
              <div style="display: flex">
                <el-input v-model="scope.row[item.prop]"></el-input>
                <div>
                  <slot
                    v-if="$slots.cellEdit"
                    name="cellEdit"
                    :scope="scope"></slot>
                  <div class="action-icon" v-else>
                    <el-icon-check
                      class="check"
                      @click.stop="check(scope)"></el-icon-check>
                    <el-icon-close
                      class="close"
                      @click.stop="close(scope)"></el-icon-close>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <!-- slot是一个插槽出口，表示了父元素提供的插槽内容将在哪里被渲染 -->
              <slot v-if="item.slot" :name="item.slot" :scope="scope"></slot>
              <span v-else>{{ scope.row[item.prop] }}</span>
              <component
                v-if="item.editable"
                :is="`el-icon-${toLine(editIcon)}`"
                class="edit"
                @click.stop="clickEditIcon(scope)"></component>
            </template>
          </template>
        </template>
      </el-table-column>
    </template>
    <el-table-column
      :align="actionOption.align"
      :label="actionOption.label"
      :width="actionOption.width">
      <template #default="scope">
        <!-- 编辑模式下显示确认和取消 -->
        <slot name="editRow" :scope="scope" v-if="scope.row.rowEdit"></slot>
        <!-- 正常状态下显示 编辑和删除 -->
        <slot name="action" :scope="scope" v-else></slot>
      </template>
    </el-table-column>
  </el-table>
  <div
    v-if="pagination && !isLoading"
    class="pagination"
    :style="{ justifyContent }">
    <el-pagination
      v-model:currentPage="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" />
  </div>
</template>

<script setup>
import cloneDeep from 'lodash/cloneDeep'
import { computed, onMounted, ref, watch } from 'vue'
import { toLine } from '../../../utils'
let props = defineProps({
  // 表格配置项
  options: {
    type: Array,
    required: true
  },
  // 表格数据
  data: {
    type: Array,
    required: true
  },
  // 编辑图标
  editIcon: {
    type: String,
    default: 'Edit'
  },
  // 显示在加载图标下方的加载文案
  elementLoadingText: {
    type: String
  },
  // 自定义加载图标
  elementLoadingSpinner: {
    type: String
  },
  // 自定义加载图标(svg)
  elementLoadingSvg: {
    type: String
  },
  // 自定义加载图标(svg)的配置
  elementLoadingSvgViewBox: {
    type: String
  },
  // 背景遮罩的颜色
  elementLoadingBackground: {
    type: String
  },
  // 是否可用编辑行
  isEditRow: {
    type: Boolean,
    default: false
  },
  // 编辑行按钮的标识
  editRowIndex: {
    type: String,
    default: ''
  },
  // 是否显示分页
  pagination: {
    type: Boolean,
    default: false
  },
  // 分页的对齐方式
  paginationAlign: {
    type: String,
    default: 'left'
  },
  // 当前第几页
  currentPage: {
    type: Number,
    default: 1
  },
  // 显示分页数据多少条的选项
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 40]
  },
  // 数据总条数
  total: {
    type: Number,
    default: 0
  }
})

// 深拷贝一份表格的数据
let tableData = ref(cloneDeep(props.data))

let cloneEditRowIndex = ref(props.editRowIndex)
// 过滤操作项之后的配置
let tableOption = computed(() => props.options.filter((item) => !item.action))

let actionOption = computed(() => props.options.find((item) => item.action))

// 监听的标识
let watchData = ref<boolean>(false)

// 如果data的数据变了 要重新给tableData赋值
// 只需要监听一次就可以了
let stopWatchData = watch(
  () => props.data,
  (val) => {
    watchData.value = true
    tableData.value = val
    tableData.value.map((item) => {
      item.rowEdit = false
    })
    if (watchData.value) stopWatchData()
  },
  { deep: true }
)

watch(
  () => props.editRowIndex,
  (val) => {
    if (val) cloneEditRowIndex.value = val
  }
)

// 当前被点击的单元格的标志
let currentEdit = ref('')
let currentPage = computed(() => props.currentPage)
let justifyContent = computed(() => {
  if (props.paginationAlign === 'left') return 'flex-start'
  else if (props.paginationAlign === 'right') return 'flex-end'
  else return 'center'
})
let isLoading = computed(() => !props.data || !props.data.length)

let emits = defineEmits([
  'confirm',
  'cancel',
  'update:editRowIndex',
  'size-change',
  'current-change'
])

onMounted(() => {
  tableData.value.map((item) => {
    item.rowEdit = false
  })
})

let clickEditIcon = (scope) => {
  currentEdit.value = scope.$index + scope.column.id
}

let handleSizeChange = (val) => {
  emits('size-change', val)
}

let handleCurrentChange = (val) => {
  emits('current-change', val)
}

let check = (scope) => {
  emits('confirm', scope)
  currentEdit.value = ''
}

let close = (scope) => {
  emits('cancel', scope)
  currentEdit.value = ''
}

let rowClick = (row, column) => {
  if (column.label === actionOption.value.label) {
    if (props.isEditRow && cloneEditRowIndex.value === props.editRowIndex) {
      row.rowEdit = !row.rowEdit
      tableData.value.map((item) => {
        if (item !== row) item.rowEdit = false
      })
      if (!row.rowEdit) emits('update:editRowIndex', '')
    }
  }
}
</script>