2023-09-03 TTable组件实现虚拟滚动，解决数据量大页面卡顿问题

所有示例效果

1. 简介

HTML一行代码，可以实现表格编辑/分页/表格内/外按钮操作/行内文字变色/动态字典展示/filters格式化数据/排序/显示隐藏表格内操作按钮等

点击查看文档实例demo

代码示例：

   <t-table
       :table="table"
        :columns="table.columns"
        @size-change="handlesSizeChange"
        @page-change="handlesCurrentChange"
      />

2、配置参数（Table Attributes）

3、events 其他事件按照el-table直接使用（如sort-change排序事件）

4、Methods 方法（继承el-table的所有方法）

5、 部分具体代码——代码较多，可以结合文档案例使用

 <template v-for="(item,index) in renderColumns">
        <el-table-column
          :key="index+'i'"
          :type="item.type"
          :label="item.label"
          :prop="item.prop"
          :min-width="item['min-width'] || item.minWidth || item.width"
          :sortable="item.sort"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.noShowTip"
          v-bind="$attrs"
          v-on="$listeners"
        >
          <template slot-scope="scope">
          <!--非编辑模式-->
            <template v-if="!isEditCell">
             <!-- render渲染 -->
              <template v-if="item.customRender">
                <OptComponent
                  v-for="(comp, i) in item.customRender.comps"
                  :key="scope.$index + i.toString()"
                  v-bind="comp"
                  :scope="scope"
                />
              </template>
              <!--自定义作用域插槽-->
              <template v-if="item.slotName">
                <slot :name="item.slotName" :param="scope"></slot>
              </template>
               <!-- 单个单元格编辑 -->
              <template v-if="item.canEdit">
                <single-edit-cell
                  :canEdit="item.canEdit"
                  :configEdit="item.configEdit"
                  v-model="scope.row[scope.column.property]"
                  v-on="$listeners"
                  v-bind="$attrs"
                  ref="editCell"
                >
                  <template v-for="(index, name) in $slots" :slot="name">
                    <slot :name="name" />
                  </template>
                </single-edit-cell>
              </template>
               <!--常见的filters（金额/百分比）-->
              <div
                v-if="!item.filters&&!item.slotName&&!item.customRender"
                :style="{color:txtChangeColor(scope)}"
              >{{scope.row[item.prop]}}</div>
              <div v-if="item.filters" :style="{color:txtChangeColor(scope)}">
              <!--常见的字典过滤-->
                <span
                  v-if="item.filters.param"
                >{{scope.row[item.prop] |constantKey2Value(item.filters.param)}}</span>
                <span
                  v-if="!item.filters.param&&item.filters.method==='￥'"
                >{{scope.row[item.prop] |currencyFilter}}</span>
                <span
                  v-if="!item.filters.param&&item.filters.method==='%'"
                >{{scope.row[item.prop] |percentFilter}}</span>
              </div>
            </template>
            <!--开启编辑模式-->
            <template v-else>
              <edit-cell
                :configEdit="item.configEdit"
                v-model="scope.row[scope.column.property]"
                v-bind="$attrs"
                v-on="$listeners"
                ref="editCell"
              >
                <template v-for="(index, name) in $slots" :slot="name">
                  <slot :name="name" />
                </template>
              </edit-cell>
            </template>
          </template>
        </el-table-column>
      </template>

6、源码地址

gitHub组件地址

gitee码云组件地址

相关文章

基于ElementUi&Antd再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档