针对表格的封装

最新推荐文章于 2022-11-09 22:15:39 发布

职业攻城狮

最新推荐文章于 2022-11-09 22:15:39 发布

阅读量309

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yme1034385426/article/details/106895865

版权

本文详细介绍了如何在Vue.js中进行表格组件的封装，包括其核心功能实现、数据处理及交互设计，旨在提升开发效率和代码复用性。

摘要由CSDN通过智能技术生成

针对表格的分装vue

针对表格的封装

针对表格的封装

<!--表格组件 -->
<template>
  <section class="ces-table-page">
    <!-- 数据表格 -->
    <section class="ces-table">
      <el-table
        :data="tableData"
        :size="size"
        height="100%"
        :border="isBorder"
        @select="select"
        @select-all="selectAll"
        v-loading="loading"
        :defaultSelections="defaultSelections"
        ref="cesTable"
      >
        <el-table-column
          v-if="isSelection"
          type="selection"
          align="center"
        ></el-table-column>
        <el-table-column
          v-if="isIndex"
          type="index"
          :label="indexLabel"
          align="center"
          width="50"
        ></el-table-column>
        <!-- 数据栏 -->
        <el-table-column
          v-for="(item, index) in tableCols"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
        >
          <template slot-scope="scope">
            <!-- 按钮 -->
            <span v-if="item.type === 'Button'">
              <el-button
                v-for="(btn, index) in item.btnList"
                :key="index"