vue 封装Table组件

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

基于element-plus UI 框架封装一个table组件

在项目目录下的components新建一个Table.vue

<template>
    <section class="wrap">
        <el-table
            ref="table"
            :data="tableData" 
            v-loading="loading" 
            style="width: 100%"
            :stripe="stripe"
            :border="border"
            :row-key="(row) => { return row.id }"
            @selection-change="handleSelectionChange"
            :height="tableHeight"
            >
            // 复选框列 type="selection"
            <el-table-column
                v-if="selection"
                type="selection"
                width="56"
                align="center"
                :fixed="fixed"
            >
            </el-table-column>
            // 序号列 type="index"
            <el-table-column
                v-if="index"
                type="index"
                width="56"
                label="序号"
                :fixed="fixed"
            ></el-table-column>
            <template v-for="(item, index) in tableProps" :key="index">
                <el-table-column 
                    :prop="item.prop" 
                    :label="item.label" 
                    :width="item.width" 
                    :type="item.type"
                    :show-overflow-tooltip="item.showOverflowTooltip" 
                    :align="item.align"
                    :fixed="item.fixed"
                    :sortable="item.sort"
                    :formatter="item.formatter"
                   >
                   <template v-if="item.prop === 'operation'" #default="scope">
                        <el-button size="small" type="success" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button size="small" type="warning" @click="handleAdd(scope.$index, scope.row)">新增</el-button>
                   </template>
                </el-table-column>
            </template>
        </el-table>
    </section>
</template>

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

const tableData = ref([])
const loading = ref(true)

// 监听父组件传递过来的数据
watch(() => props.data, (val) => {
    tableData.value = val
    loading.value = false
})

// 声明要触发的emits
const emits = defineEmits(['selectionChange','deleteItem', 'editItem', 'addItem'])

// 父组件传递过来的props
const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    tableProps: {
        type: Array,
    },
    tableHeight: {
        type: String,
        default: '500'
    },
    selection: Boolean,
    index: Boolean,
    border: Boolean,
    stripe: Boolean,
})

// 定义表格的列属性
const tableProps = ref([
    {
        type: 'selection',
        label: '',
        width: '55',
        align: 'center'
    },
    {
        type: 'index',
        label: 'No.',
        width: '55',
        align: 'center'
    },
    {
        prop: 'name',
        label: '姓名',
        width: '',
        showOverflowTooltip: true,
        align: 'center'
    },
    {
        prop: 'username',
        label: '用户名',
        width: 120,
        showOverflowTooltip: true,
        align: 'center'
    },
    {
        prop: 'email',
        label: '邮箱',
        width: '',
        showOverflowTooltip: true,
        align: 'center'
    },
    {
        prop: 'phone',
        label: '联系电话',
        width: '',
        showOverflowTooltip: true,
        align: 'center',
        // 单元格格式化函数,参考element-plus formatter
        formatter: (row) => {
          return `+86 ${ row.phone }`;
        },
    },
    {
        prop: 'website',
        label: '网址',
        width: '',
        showOverflowTooltip: true,
        align: 'center',
    },
    {
        prop: 'operation',
        label: '操作',
        align: 'center',
        formatter: (row,column) => {}
    }
])

const handleAdd = (row) => {
    emits('addItem', row)
}

const handleEdit = (rowData) => {
    emits('editItem', rowData)
}

const handleDelete = (index, rowData) => {
    emits('deleteItem', index)
}

const handleSelectionChange = (row) => {
    console.log('row data are: ', row[0].name)
}

</script>

在具体的父组件中使用:文章来源地址https://www.toymoban.com/news/detail-733677.html

<template>
    <section class="container">
        <section class="table-wrap">
            <Table 
                :data="tableData" 
                ref="table" 
                border
                stripe 
                @selectionChange="handleSelectionChange" 
                @editItem="handleEdit"
                @addItem="handleAdd"
                @deleteItem="handleDelete">
            </Table>
        </section>
        // <span v-pre>{{ this will not be compiled }}</span>
    </section>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Table from '@/components/Table.vue'

onMounted(() => {
    queryData()
})
const table = ref(null)

const data = reactive({
    /*  materialForm: {
        materailName: '',
        materialCode: '',
        snCode: '',
        productCode: '',
        productName: '',
        result: '',
        workOrder: [],
        productLine: [],
    },
    loading: false,
    lineList: [],
    orderList: [],
    */
    tableData: [],
})

const { materialForm, lineList, orderList, tableData, loading } = toRefs(data)

const title = ref("")

const addData = (param) => {
    param.id = Math.random()
    // const data = Object.assign({}, param) // 拷贝一个对象
    const data = { ...param }
    // const data = JSON.parse(JSON.stringify(param)) // 深拷贝
    tableData.value.push(data)
}

const handleAdd = () => {
    editRef.value.openDialog()
    title.value = '新增'
    formData.value = {}
}
const handleDelete = (index, row) => {
    ElMessageBox.confirm('此操作将会删除本条数据,请确定是否继续执行?','提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            tableData.value.splice(index, 1)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
}

const handleSelectionChange = () => {
    table.value.handleSelectionChange()
}

provide('formObj', { title, formData, addData })

const handleEdit = (rowData) => {
    title.value = '编辑'
    const param = {...rowData}
    formData.value = param
    // formData.value = Object.assign({}, rowData)
    // 避免引用传递,做一次数据拷贝
    // formData.value = JSON.parse(JSON.stringify(row))
    editRef.value.openDialog()
}

const query = () => {
    queryData()
}

const reset = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    queryData()
}

const queryData = () => {
    loading.value = true
    // const param = { ...materialForm.value, ...{ name: 'zhangsan', age: 20 } }
    fetch("https://jsonplaceholder.typicode.com/users").then((resposne) => resposne.json()).then((json) => {
        loading.value = false
        tableData.value = json
    })
}

</script>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(52)
  • 前端vue自定义table 表格 表格组件 Excel组件

    前端组件化开发与Excel组件设计 一、前端开发的复杂性与组件化的必要性 随着技术的发展,前端开发的复杂度越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。

    2024年02月09日
    浏览(52)
  • 【JaveWeb教程】(8)Web前端基础:Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍

    接下来我们来学习一下ElementUI的常用组件,对于组件的学习比较简单,我们只需要参考官方提供的代码,然后复制粘贴即可。本节主要学习Tbale表格组件和Pagination分页组件 Table 表格:用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。 接下来

    2024年02月02日
    浏览(41)
  • vue+element-ui el-table组件二次封装实现虚拟滚动,解决数据量大渲染DOM过多而卡顿问题

    某些页面不做分页时,当数据过多,会导致页面卡顿,甚至卡死 一、固定一个 可视区域 的大小并且其大小是不变的,那么要做到性能最大化就需要尽量少地渲染 DOM 元素,而这个最小值也就是可视范围内需要展示的内容,而可视区域之外的元素均可以不做渲染。 二、如何计

    2024年02月10日
    浏览(63)
  • Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页

    Vue+Element-UI 实现前端分页功能,利用el-table和el-pagination组件实现表格前端分页:         当table的数据量比较大的时候,一个屏幕展示不出全部的数据,这个时候就需要分页显示。而多数情况下都是做的后端分页,就是将分页参数和查询条件一并传到后端,后端将当前页要

    2024年01月20日
    浏览(54)
  • 如何使用Vue实现Excel表格数据的导入,在前端实现Excel表格文件的上传和解析,并使用Table组件将解析出来的数据展示在前端页面上

    随着互联网的发展和社会的进步,各个行业的数据量越来越大,对于数据的处理变得越来越重要。其中,Excel表格是一种重要的数据处理工具。在前后端项目中,实现Excel表格的导入和导出功能也愈加常见。这篇文章将介绍如何使用Vue实现Excel表格数据的导入。 在开始介绍实现

    2024年02月11日
    浏览(63)
  • 基于vue+Element Table Popover 弹出框内置表格的封装

    在选择数据的时候需要在已选择的数据中对比选择,具体就是点击一个按钮,弹出一个小的弹出框,但不像对话框那样还需要增加一个遮罩层,更加的轻量化,但是需要查看的数据很多需要一个列表来展示,列表的话还需要一个筛选功能。 我的思路是增加复选框列,将选择的

    2024年02月07日
    浏览(39)
  • vue最强table vxe-table 虚拟滚动列表 前端导出

    最近遇到个问题。后台一次性返回2万条列表数据。 并且需求要求所有数据必须全部展示,不能做假分页(不能优化了)。 这些数据的直接来源就是CS客户端。 他们做CS客户端就是一次性加载几万条数据不分页(说这是客户的要求)。 我体验了一把CS客户端,数万条数据放在

    2024年02月12日
    浏览(38)
  • JavaScript和Vue中实现表格(table)固定表头和首列【提供Vue和原生代码】

    本文主要介绍关于 JS 或 Vue 中如何进行表头,列固定,可以根据实际应用场景应用于 原生 , Vue , 移动端 , 小程序 中 实际效果展示: 对于列的固定, table 中有对应的方法,但是如果列和表头都要固定,只能通过其他方式实现,如果您找到了更好的自身方法,还请斧正 表

    2024年02月09日
    浏览(51)
  • Ant Design Vue的table组件高度自适应问题

    今天在编写公司项目的时候碰到ant design vue的table组件高度没办法自适应的问题,会出现如下页面情况。  最终尝试的解决方案只能通过监听浏览器窗口变化实现自适应 (1)给表格的srcoll定义一个动态接收参数,方便后面数据增加动态改变滚动高度。  (2)vue3项目中就直接

    2024年02月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包