vue3封装element-plus的el-table

已于 2024-07-17 18:33:55 修改
阅读量911 收藏 10
点赞数 2
分类专栏： vue3 文章标签： vue.js javascript 前端
于 2023-09-24 15:42:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_am_a_div/article/details/133241956
版权

文章目录

前置条件

需要引入使用jsx
为了渲染表格的单元格内容formatter，jsx引入使用看这篇

一、效果

封装的el-table公共组件table.vue
注意深拷贝用的lodash方法，以及使用了jsx插件渲染列的标签和事件
在这里插入图片描述

二、语法糖setup封装版本

封装table.vue

<template>
  <div class="page-view">
    <el-table v-loading="tableData.tableLoading" ref="multipleTableRef" class="jg-table" :data="tableData.data"
      style="width: 100%;" @selection-change="handleSelectionChange" @row-click="rowClick" @sort-change="sortChange">

      <template v-for="(item, index) in  tableData.columnsData " :key="index">

        <!-- 多选 -->
        <el-table-column v-if="item.type === 'selection'" :type="item.type" :width="item.width" />
        <!-- 单选 -->
        <el-table-column v-else-if="item.type === 'radio'" :width="item.width" class-name="no-radio-label">
          <template #default="{ row, $index }">
            <el-radio @change="changeRadio" v-model="radioIndex" :label="$index"></el-radio>
          </template>
        </el-table-column>
        <!-- 渲染formatter -->
        <!-- <el-table-column v-else :property="item.field" :label="item.title" :width="item.width"
          :min-width="item.minWidth" :max-idth="item.maxWidth" :showOverflowTooltip="item.showOverflowTooltip"
          :sortable="item.sortable" :formatter="item.formatter" /> -->
        <el-table-column v-else :property="item.field" :label="item.title" :width="item.width"
          :min-width="item.minWidth" :max-idth="item.maxWidth" :showOverflowTooltip="item.showOverflowTooltip"
          :sortable="item.sortable" :formatter="item.formatter">
          <template #header>
            <div style="display: inline-block; align-items: center;">
              <span>{{ item.title }}</span>
            </div>
          </template>
        </el-table-column>
      </template>

    </el-table>


    <pre>{{ tableData }}</pre>
  </div>
</template>

<script setup lang="jsx">
import { ref, defineOptions, defineEmits, defineProps, watch } from 'vue' // 按需引入ref函数
import _ from 'lodash'


defineOptions({
  name: "JgTable"
})

const emit = defineEmits(['update:editItem', 'update:handleSelectionChange', 'update:changeRadio', 'update:sortChange'])

const props = defineProps({
  description: {
    type: String,
    default: () => {
      return ' '
    }
  },
  tableDataObj: {
    type: Object,
    default: () => {
      return {}
    }
  },
})



let tableData = ref({})
let radioIndex = ref(null)

watch([() => props.tableDataObj, () => props.rulesData], ([tableDataObj, rulesData]) => {
  // console.log('监听');
  tableData.value = _.cloneDeep(tableDataObj) // 使用lodash的深拷贝方法

}, { deep: true, immediate: true })


// 编辑-暂不使用 目前由子组件自己触发
function editItem(row, type) {
  console.log(row, type,);

  // 子传父
  emit('update:editItem', { row: row, type: type });
}


// 多选
const handleSelectionChange = (val) => {
  // console.log(val);
  // 子传父
  emit('update:handleSelectionChange', val);
}
// 单选
const changeRadio = (val) => {
  // console.log('单选', val, radioIndex.value.aa);
  let item = tableData.value.data?.[val] || {}
  emit('update:changeRadio', item);
}

// 表格点击事件
const rowClick = (val) => {
  // console.log(val);
}

// 排序
const sortChange = (val) => {
  // console.log(val);
  emit('update:sortChange', val);
}

</script>
<style lang="scss" scoped>
// 去除单选框的内容
:deep(.no-radio-label) {
  .el-radio__label {
    display: none;
  }
}
</style>

使用index.vue

<template>
  <JgTable :tableDataObj="tableData" @update:editItem="updateEditItem"
    @update:handleSelectionChange="updateHandleSelectionChange" @update:changeRadio="updateChangeRadio"
    @update:sortChange="updateSortChange"></JgTable>
</template>
<script setup lang="jsx">
import { ref, defineComponent, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
import { Delete, Edit, Download, QuestionFilled, EditPen, Tickets } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: 'EquipmentDefect'
})
const nameList = ref([])


let tableData = ref({
  tableLoading: false,
  // title:名称 field：key type：单选复选框 width minWidth maxWidth showOverflowTooltip formatter:格式化内容
  columnsData: [
    { title: '多选', type: 'selection', width: 55 },
    { title: '单选', type: 'radio', width: 55 },
    { title: '缺陷名称', field: 'aa', formType: 'input', width: 120 },
    { title: '缺陷描述', field: 'bb', formType: 'input', showOverflowTooltip: true },
    { title: '缺陷发布时间', field: 'cc1', formType: 'date', dateType: 'YYYY-MM-DD', width: 140 },
    { title: '缺陷发布时间2', field: 'cc2', formType: 'dateTime', dateType: 'YYYY-MM-DD HH:mm:ss', width: 150 },
    // { title: '缺陷发布时间',  field: 'cc1', formType: 'datetime', dateType: 'YYYY-MM-DD HH:mm:ss' },
    {
      title: '设备类型', field: 'dd', formType: 'select', width: 120, selectList: nameList,

      formatter: (row) => {
        const val = nameList.value.find(item => item.value === row.dd)?.name || ''
        return [<span>{val}</span>]
      }
    },
    { title: '设备厂家', field: 'ee', formType: 'input' },
    { title: '设备版本', field: 'ff', formType: 'input', width: 160, showOverflowTooltip: true },
    {
      title: '缺陷设备数量', field: 'gg', formType: 'input', sortable: 'custom',width: 160,
      formatter: (row, column) => {
        // console.log(112,row, column); // 直接{row}或{column} 不会显示内容
        return [<span onClick={() => clickItem(row, 'view')}> {row.gg} </span>]
      }
    },
    {
      title: '缺陷反馈状态', field: 'hh', formType: 'radio', minWidth: 100, selectList: [
        { name: '已反馈', value: 1 },
        { name: '未反馈', value: 0 },
      ],
      formatter: (row) => (
        row ? <el-tag style="border: none;" class="cursor" type={row.hh === 1 ? 'primary' : 'warning'}>{row.hh === 1 ? '已反馈' : row.hh === 0 ? '未反馈' : ''}</el-tag> : ''
      )
    },
    {
      title: '缺陷处置进度', field: 'ii', formType: 'progress',
      formatter: (row) => (
        <el-progress class="table_progress" width={13} stroke-width={2} type="circle" percentage={row.ii} />
      )
    },
    // {
    //   title: '测试', field: 'ceshi',width: 200,
    //   formatter: (row, column) => {
    //     // console.log(112,row, column); // 直接{row}或{column} 不会显示内容
    //     return  [<el-tag type={row.ceshi == "可发放" ? "success" : "danger"} onClick={() => editItem(row, 'view')}> {row.ceshi} </el-tag>, <span>{column.label}</span>]
    //   }
    // },
    {
      title: '操作', field: 'caozuo', width: 220,
      formatter: (row) => (
        [
          <el-button link type="primary" size="small" icon={Tickets} onClick={() => editItem(row, 'view')} >查看</el-button >,
          <el-button link type="primary" size="small" icon={EditPen} onClick={() => editItem(row, 'edit')} >编辑</el-button >,
          <el-button link type="primary" size="small" icon={Delete} onClick={() => editItem(row, 'delete')} >删除</el-button >,
        ]
      )
    },

  ],
  data: Array.from({ length: 7 }).map((ele, index) => {
    return {
      aa: '客户端不适配',
      bb: '客户端无法适配凝思 4.2.40',
      cc1: '2023-7-20',
      cc2: '2023-7-20 10:10:10',
      dd: Math.floor(Math.random() * 5),
      ee: '帕拉迪',
      ff: 'PLD Sys 61012100',
      gg: Math.floor(Math.random() * 20),
      hh: Math.floor(Math.random() * 2),
      ii: Math.floor(Math.random() * 101),
      ceshi: 123,
    }
  })
})

const clickItem = (row, type) => {
  console.log(row, type);
  ElMessage({
    type: 'success',
    message: '点击',
  })
}
// 编辑或查看
const editItem = (row, type) => {
  switch (type) {
    case 'view':
    case 'edit':
      console.log(row, type);
      break;
    case 'delete':
      deleteItem(row, type)
      break;

    default:
      break;
  }
}

// 删除
const deleteItem = (row, type) => {
  ElMessageBox.confirm(
    '确定删除该列?',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
    })
}

// 子组件调用父组件的测试事件
const updateEditItem = (data) => {
  console.log('子组件调用父组件的测试事件', data);
  editItem(data.row, data.type)
}
const updateHandleSelectionChange = (data) => {
  console.log('updateHandleSelectionChange', data);
}
const updateChangeRadio = (data) => {
  console.log('updateChangeRadio', data);
}
const updateSortChange = (data) => {
  console.log(data);
}


onMounted(() => {
  setTimeout(() => {
    nameList.value = [
      { name: '横向隔离', value: 0 },
      { name: '纵向加密', value: 1 },
      { name: '防火墙', value: 2 },
      { name: '监测装置', value: 3 },
      { name: '运维网关', value: 4 },
      { name: '其他', value: 5 },
    ]
  }, 1000);
})
// 将变量和函数返回，以便在模版中使用

</script>
<style lang="scss" scoped></style>

三、vue原生语法版本

封装的table.vue


<template>
  <div class="page-view flex-center">
    <el-table v-loading="tableData.tableLoading" ref="multipleTableRef" class="jg-table" :data="tableData.data"
      style="width: 100%;" @selection-change="handleSelectionChange" @row-click="rowClick" @sort-change="sortChange">

      <template v-for="(item, index) in  tableData.columnsData " :key="index">

        <!-- 多选 -->
        <el-table-column v-if="item.type === 'selection'" :type="item.type" :width="item.width" />
        <!-- 单选 -->
        <el-table-column v-else-if="item.type === 'radio'" :width="item.width" class-name="no-radio-label">
          <template #default="{ row, $index }">
            <el-radio @change="changeRadio" v-model="radioIndex" :label="row"></el-radio>
          </template>
        </el-table-column>
        <!-- 渲染formatter -->
        <el-table-column v-else :property="item.field" :label="item.title" :width="item.width" :min-width="item.minWidth"
          :max-idth="item.maxWidth" :showOverflowTooltip="item.showOverflowTooltip" :sortable="item.sortable"
          :formatter="item.formatter" />
      </template>

    </el-table>
  </div>
</template>

<script lang="jsx">
import { ref, defineComponent, getCurrentInstance, h } from 'vue' // 按需引入ref函数

import { Edit, Download, QuestionFilled, EditPen, Tickets, Delete } from '@element-plus/icons-vue'


export default defineComponent({
  name: 'JgTable',
  props: {
    description: {
      type: String,
      default: () => {
        return ' '
      }
    },
    tableDataObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  emits: ['update:editItem'],
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance()


    let tableData = ref({})
    let radioIndex = ref(null)

    watch([() => props.tableDataObj, () => props.rulesData], ([tableDataObj, rulesData]) => {
      // console.log('监听');
      tableData.value = proxy.$_.cloneDeep(tableDataObj) // 使用lodash的深拷贝方法

    }, { deep: true, immediate: true })


    function editItem(row, type) {
      console.log(row, type,);

      // 子传父
      emit('update:editItem', { row: row, type: type });
    }

    const myDiv = () => h('div', null, 'Hello, 1')

    // 多选
    const handleSelectionChange = (val) => {
      console.log(val);
      // 子传父
      emit('update:handleSelectionChange', val);
    }
    // 单选
    const changeRadio = (val) => {
      // console.log('单选', val, radioIndex.value.aa);
      emit('update:changeRadio', val);
    }

    // 表格点击事件
    const rowClick = (val) => {
      // console.log(val);
    }

    // 排序
    const sortChange = (val) => {
      // console.log(val);
      emit('update:sortChange', val);
    }




    // 将变量和函数返回，以便在模版中使用
    return {
      myDiv,
      radioIndex,

      tableData,

      editItem,
      handleSelectionChange,
      changeRadio,
      rowClick,
      sortChange,

      EditPen,
      Tickets,
      Delete,

    }
  }
})
</script>
<style lang="scss" scoped>
// 去除单选框的内容
:deep(.no-radio-label) {
  .el-radio__label {
    display: none;
  }
}
</style>

index.vue使用

<template>
  <JgTable :tableDataObj="tableData" @update:editItem="updateEditItem"
    @update:handleSelectionChange="updateHandleSelectionChange" @update:changeRadio="updateChangeRadio"
    @update:sortChange="updateSortChange"></JgTable>
</template>
<script lang="jsx">
import { ref, defineComponent, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
import { Delete, Edit, Download, QuestionFilled, EditPen, Tickets } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'


export default {
  name: "EquipmentDefect",
  setup() {
    let tableData = ref({
      tableLoading: false,
      // title:名称 field：key type：单选复选框 width minWidth maxWidth showOverflowTooltip formatter:格式化内容
      columnsData: [
        { title: '多选', type: 'selection', width: 55 },
        { title: '单选', type: 'radio', width: 55 },
        { title: '缺陷名称', field: 'aa', formType: 'input', width: 120 },
        { title: '缺陷描述', field: 'bb', formType: 'input', showOverflowTooltip: true },
        { title: '缺陷发布时间', field: 'cc', formType: 'date', dateType: 'YYYY-MM-DD', width: 140 },
        // { title: '缺陷发布时间',  field: 'cc', formType: 'datetime', dateType: 'YYYY-MM-DD HH:mm:ss' },
        {
          title: '设备类型', field: 'dd', formType: 'select', width: 120, selectList: [
            { name: '横向隔离', value: 0 },
            { name: '纵向加密', value: 1 },
            { name: '防火墙', value: 2 },
            { name: '监测装置', value: 3 },
            { name: '运维网关', value: 4 },
            { name: '其他', value: 5 },
          ],

          formatter: (row) => {
            const val = [
              { name: '横向隔离', value: 0 },
              { name: '纵向加密', value: 1 },
              { name: '防火墙', value: 2 },
              { name: '监测装置', value: 3 },
              { name: '运维网关', value: 4 },
              { name: '其他', value: 5 },
            ].find(item => item.value === row.dd)?.name || ''
            return <span>{val}</span>
          }
        },
        { title: '设备厂家', field: 'ee', formType: 'input' },
        { title: '设备版本', field: 'ff', formType: 'input', width: 160, showOverflowTooltip: true },
        {
          title: '缺陷设备数量', field: 'gg', formType: 'input', sortable: 'custom',
          formatter: (row, column) => {
            // console.log(112,row, column); // 直接{row}或{column} 不会显示内容
            return [<span onClick={() => clickItem(row, 'view')}> {row.gg} </span>]
          }
        },
        {
          title: '缺陷反馈状态', field: 'hh', formType: 'radio', minWidth: 100, selectList: [
            { name: '已反馈', value: 1 },
            { name: '未反馈', value: 0 },
          ],
          formatter: (row) => (
            row ? <el-tag style="border: none;" class="cursor" type={row.hh === 1 ? 'green' : 'warning'}>{row.hh === 1 ? '已反馈' : row.hh === 0 ? '未反馈' : ''}</el-tag> : ''
          )
        },
        {
          title: '缺陷处置进度', field: 'ii', formType: 'progress',
          formatter: (row) => (
            <el-progress class="table_progress" width="13" stroke-width="2" type="circle" percentage={row.ii} />
          )
        },
        // {
        //   title: '测试', field: 'ceshi',width: 200,
        //   formatter: (row, column) => {
        //     // console.log(112,row, column); // 直接{row}或{column} 不会显示内容
        //     return  [<el-tag type={row.ceshi == "可发放" ? "success" : "danger"} onClick={() => editItem(row, 'view')}> {row.ceshi} </el-tag>, <span>{column.label}</span>]
        //   }
        // },
        {
          title: '操作', field: 'caozuo', width: 220,
          formatter: (row) => (
            [
              <el-button link type="primary" size="small" icon={Tickets} onClick={() => editItem(row, 'view')} >查看</el-button >,
              <el-button link type="primary" size="small" icon={EditPen} onClick={() => editItem(row, 'edit')} >编辑</el-button >,
              <el-button link type="primary" size="small" icon={Delete} onClick={() => editItem(row, 'delete')} >删除</el-button >,
            ]
          )
        },

      ],
      data: Array.from({ length: 7 }).map((ele, index) => {
        return {
          aa: '客户端不适配',
          bb: '客户端无法适配凝思 4.2.40',
          cc: '2023-7-20',
          dd: Math.floor(Math.random() * 5),
          ee: '帕拉迪',
          ff: 'PLD Sys 61012100',
          gg: Math.floor(Math.random() * 20),
          hh: Math.floor(Math.random() * 2),
          ii: Math.floor(Math.random() * 101),
          ceshi: 123,
        }
      })
    })

    const clickItem = (row, type) => {
      console.log(row, type);
      ElMessage({
        type: 'success',
        message: '点击',
      })
    }
    // 编辑或查看
    const editItem = (row, type) => {
      switch (type) {
        case 'view':
        case 'edit':
          console.log(row, type);
          break;
        case 'delete':
          deleteItem(row, type)
          break;

        default:
          break;
      }
    }

    // 删除
    const deleteItem = (row, type) => {
      ElMessageBox.confirm(
        '确定删除该列?',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          ElMessage({
            type: 'success',
            message: 'Delete completed',
          })
        })
        .catch(() => {
        })
    }

    // 子组件调用父组件的测试事件
    const updateEditItem = (data) => {
      console.log('子组件调用父组件的测试事件', data);
      editItem(data.row, data.type)
    }
    const updateHandleSelectionChange = (data) => {
      console.log('updateHandleSelectionChange', data);
    }
    const updateChangeRadio = (data) => {
      console.log('updateChangeRadio', data);
    }
    const updateSortChange = (data) => {
      console.log(data);
    }
    onMounted(() => {

    })
    // 将变量和函数返回，以便在模版中使用
    return {
      tableData,

      ElMessageBox,

      clickItem, // 点击
      editItem, // 查看编辑
      deleteItem, // 删除

      // 子传父表格事件
      updateEditItem,
      updateHandleSelectionChange,
      updateChangeRadio,
      updateSortChange,

      // icon
      Edit,
      Download,
      QuestionFilled,
      EditPen,
      Tickets,
      Delete,

    };
  },
};
</script>
<style lang="scss" scoped></style>
i_am_a_div_日积月累_
关注
专栏目录
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
sybh的博客
11-17 1554
ProTable 组件目前已是2.0版本🌈，在1.0版本中大家提出的问题与功能优化，目前已经得到优化和解决。😀 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star🧡🤔前提：首先我们在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装，否则做得再好，也不太完美。🧐。
【Vue3】el-table 组件二次封装，看这一篇就够了
m0_68271787的博客
02-28 4033
然而，数据的 key 作为列名的情况很少（至少在我们这里，一般是使用中文作为列名的），这就需要我们使用可定制的列名，并且，如果我们不想展示某些字段，上面的写法也是做不到的（它会显示数据的所有字段）。这时候，我们只需要一个映射（mapper）就可以解决这些问题。该对象的每一个属性对应每一列的 prop、key，值对应列的列名 label。javascript。
Vue3 Element-Plus el-table 表格 自定义列 - 附完整示例
最新发布
m0_48968874的博客
10-21 1856
Vue3 Element-Plus el-table 表格 自定义列 - 附完整示例
Vue3和ElementPlus封装table组件_vue3 + elementplus组件
2401_84138835的博客
04-16 490
【代码】Vue3和ElementPlus封装table组件_vue3 + elementplus组件。
Vue3 + Element Plus 封装公共表格组件（带源码）
热门推荐
Yana's Blog
05-06 1万+
由于项目中有很多菜单都是列表数据的展示，为避免太多重复代码，故将 Element Plus 的 Table 表格进行封装，实现通过配置展示列表数据el-table-column 使用自定义表头支持插槽labelStyle 支持样式自定义支持 tooltipel-table-column 使用自定义单元格支持插槽style 属性支持自定义样式formatter 方法支持自定义显示内容
vue3封装element-plus的Table表格
实习打字猿的博客
08-20 2939
vue3封装element-plus的Table表格
Vue3和ElementPlus封装table组件
广漂程序猿DevinRock
03-03 2045
Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口。简单理解：就是对子组件的扩展，通过 插槽向子组件内部指定位置传递内容。插槽是组件的一块HTML模板，这块模板显示不显示，怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。
vue3企业级项目二次封装el-table、分页
06-28
介绍： 1、后台管理系统用到的表格、分页...此资源以开发简化版element-plus学习其原理和内核，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
vue3 - element-plus表格组件el-table实现鼠标拖曳排序功能，vue3 Table表格拖拽排序，表格每行使用鼠标拖动进行排序功能，表格拖拽排序实现（详细示例代码，一键复制开箱即用
高级前端工程师
03-23 3980
vue3，elementPlus，el-table，typescript，表格组件，Table表格，表格拖动排序，表格拖曳排序，鼠标拖拽表格进行排序功能，elementplus表格如何实现拖动每行进行排序操作，表格拖动改变顺序，鼠标拖曳，表格内的数据项拖拽排序，vue3如何实现element-Plus表格组件进行表格内的数据项拖拽排序，列表拖拽排序效果，实现table动态拖拽，鼠标拖着排序，vue3 element Plus 表格拖曳拖动拖拽 排序，el-table拖拽排序实现，表格内容拖拽重新排序，树形表
vue3+element-plus封装表格
weixin_50041614的博客
09-05 2578
vue3+element-plus封装表格
项目中简单封装vue3+element-plus表单
04-01
项目中简单封装vue3+element-plus表单
vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
04-19
vue3-pro-table 之前有一个是基于 vue2 开发的 vue3-pro-table 是基于 vue3 开发 一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件 特性 将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量 配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果 配置化的表格项，跟 el-table-column 的配置属性类似 配置化的搜索表单，支持大部分表单元素 配置化的分页，跟 el-pagination 的配置属性类似 自定义是否显示搜索和分页 自定义标题栏和工具栏 丰富的插槽提供功能扩展 使用 安装和引入 安装 // npm npm install vue3-pro-table // yarn yarn add vue3-pro-table 引入 该组件依赖
基于Vue+element-ui 的Table二次封装的实现
10-18
1. **组件定义**：创建一个新的Vue组件，引入Element-UI的`el-table`和必要的列组件，如`el-table-column`。在示例代码中，我们看到`com-table`组件包含了表格的标题、选择列、以及带有插槽的自定义列。 2. **使用...
vue3中对elementplus的table进行封装
qq_46063760的博客
07-15 1525
table表格的封装
vue3 setup学习之[封装element-plus中的table]
fangshuiguang的博客
04-11 690
上篇文章对element-plus中的搜索条件el-form进行了封装，下面将对elementplus中的el-table表格进行封装，以支持el-table-column以数组类型输入，且支持类似于vue2中自定义操作的render渲染，vue3中使用动态component和h函数来实现，实现效果如下：效果图。
vue3 element plus el-table封装（三）
无心使然云中漫步
01-02 1150
上文是对el-table的基本封装上增加slot插槽，并且对col插槽进行拓展，本文主要时增加分页组件，同时进行slot传递。//CustomTable.vue增加空表格插槽，分页组件，slot传递,必要时可以扩展多个CustomTable组件。如果分页组件使用默认值，绑定true即可，如果需要自定义，绑定对象。//BaseTable.vue没有变。
vue3 二次封装element-plus 表格组件
m0_67401746的博客
03-06 1769
由于项目中会频繁的使用表格，会出现非常多的重复代码，所以决定对element-plus的table组件进行封装，尽量避免代码冗余。代码如下： 1.在components文件下新建Table/index.vue文件 <template> <el-table v-loading="listLoading" :data="tableData" element-loading-text="Loading" fit border highlight-current-row :max-heigh
vue3结合element-plus之如何优雅的使用表格
小白小白从不日别的博客
05-23 595
表格组件的使用在后台管理系统中是非常常见的，但是如果每次使用表格我们都去一次一次地从 element-plus 官网去 复制、粘贴和修改成自己想要的表格。这样一来也说得过去，但是如果我们静下来细想不难发现，表格的使用都是大同小异的，每次都去复制粘贴，对于有很多表格的后台系统来说，代码量会增加，会显得很臃肿那么有没有一种相对来说比较方便的方法去实现这个重复的过程？就比如我们只需传入配置文件，就可以帮我们生成我们想要的表格？答案当然是可行的。下面就介绍一种我个人比较喜欢的一种方案去实现表格的封装在 src 新建
vue3 element-plus table封装
08-18
在Vue3和Element Plus中封装表格组件，可以使用以下方法： 1. 首先，在Vue3中创建一个新的组件，可以命名为TableWrapper或者其他你喜欢的名称。 2. 在组件中引入Element Plus的Table组件，并在data中定义需要用到的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值