2024-01-31 TTabel组件新增单击开启编辑模式功能

所有示例效果

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、 Slots插槽

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

 <template>
  <div class="t-table" id="t_table">
    <div class="header_wrap">
      <div class="header_title">
        {{ title }}
        <slot name="title" />
      </div>
      <div class="toolbar_top">
        <!-- 表格外操作 -->
        <div class="toolbar">
          <el-button
            v-for="(item, index) in getToolbarBtn"
            :key="index"
            @click="toolbarFun(item)"
            :icon="item.icon ? item.icon : ''"
            :type="item.type || 'primary'"
            size="small"
          >{{ item.text }}</el-button>
          <el-popover
            ref="popoverClose"
            popper-class="operator_popover operator_pop"
            class="operator_popover operator_pop"
            placement="bottom-start"
            trigger="hover"
            v-if="getToolbarDown.length"
          >
            <ul class="ulClose">
              <li
                v-for="(item, index) in getToolbarDown"
                :key="index"
                @click="toolbarFun(item)"
              >{{ item.text }}</li>
            </ul>
            <el-button size="small" type="primary" icon="el-icon-setting" slot="reference">
              操作
              <i class="el-icon-arrow-down"></i>
            </el-button>
          </el-popover>
        </div>
        <slot name="toolbar"></slot>
        <!--列设置按钮-->
        <div class="header_right_wrap" :style="{ marginLeft: isShow('toolbar') ? '12px' : 0 }">
          <slot name="btn" />
          <column-set
            v-if="columnSetting"
            v-bind="$attrs"
            :columns="columns"
            @columnSetting="(v) => (columnSet = v)"
          />
        </div>
      </div>
    </div>
    <el-table
      ref="el-table"
      :data="tableData"
      :class="{
        cursor: isCopy,
        row_sort: isRowSort,
        highlightCurrentRow: highlightCurrentRow,
        radioStyle: table.firstColumn && table.firstColumn.type === 'radio',
        treeProps: isShowTreeStyle,
        is_sort_icon:onlyIconSort
      }"
      :max-height="useVirtual?maxHeight||540:maxHeight"
      v-bind="$attrs"
      v-on="$listeners"
      :highlight-current-row="highlightCurrentRow"
      :border="table.border || isTableBorder"
      :span-method="spanMethod || objectSpanMethod"
      :cell-class-name="cellClassNameFuc"
      @sort-change="soltHandle"
      @row-click="rowClick"
      @cell-dblclick="cellDblclick"
    >
      <!-- 首列之 序列号/单选框/复选框 -->
      <div v-if="table.firstColumn">
        <!-- 复选框 -->
        <el-table-column
          :selectable="table.firstColumn.selectable"
          :type="table.firstColumn.type"
          :width="table.firstColumn.width || 50"
          :label="table.firstColumn.label"
          :fixed="table.firstColumn.fixed"
          :reserve-selection="table.firstColumn.isPaging || false"
          :align="table.firstColumn.align || 'center'"
          v-if="table.firstColumn.type === 'selection'"
        ></el-table-column>
        <!-- 单选框 -->
        <el-table-column
          :type="table.firstColumn.type"
          :width="table.firstColumn.width || 50"
          :label="table.firstColumn.label"
          :fixed="table.firstColumn.fixed"
          :align="table.firstColumn.align || 'center'"
          v-if="table.firstColumn.type === 'radio'"
        >
          <template slot-scope="scope">
            <el-radio
              v-model="radioVal"
              :label="scope.$index + 1"
              @click.native.prevent="radioChange(scope.row, scope.$index + 1)"
            ></el-radio>
          </template>
        </el-table-column>
        <!-- 序列号 -->
        <el-table-column
          :type="table.firstColumn.type"
          :width="table.firstColumn.width || 50"
          :label="table.firstColumn.label"
          :fixed="table.firstColumn.fixed"
          :align="table.firstColumn.align || 'center'"
          v-if="table.firstColumn.type === 'index'"
        >
          <template slot-scope="scope">
            <span>
              {{
              isShowPagination
              ? (table.currentPage - 1) * table.pageSize + scope.$index + 1
              : scope.$index + 1
              }}
            </span>
          </template>
        </el-table-column>
      </div>
      <!-- 主体内容 -->
      <template v-for="(item, index) in renderColumns">
        <template v-if="!item.children">
          <!-- 常规表头-->
          <el-table-column
            v-if="item.isShowCol === false ? item.isShowCol : true"
            :key="index + 'i'"
            :type="item.type"
            :label="item.label"
            :prop="item.prop"
            :min-width="item['min-width'] || item.minWidth || item.width"
            :sortable="item.sort || sortable"
            :align="item.align || 'center'"
            :fixed="item.fixed"
            :show-overflow-tooltip="useVirtual?true:item.noShowTip?false:true"
            v-bind="{ ...item.bind, ...$attrs }"
            v-on="$listeners"
          >
            <template #header v-if="item.headerRequired || item.renderHeader">
              <render-header v-if="item.renderHeader" :column="item" :render="item.renderHeader" />
              <div style="display: inline" v-if="item.headerRequired">
                <span style="color: #f56c6c; fontsize: 16px; marginright: 3px">*</span>
                <span>{{ item.label }}</span>
              </div>
            </template>
            <template slot-scope="scope">
              <template v-if="!isEditCell">
                <!-- render渲染 -->
                <template v-if="item.render">
                  <render-col
                    :column="item"
                    :row="scope.row"
                    :render="item.render"
                    :index="scope.$index"
                  />
                </template>
                <!-- customRender渲染 -->
                <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">
                  <el-form
                    :model="tableData[scope.$index]"
                    :rules="isEditRules ? table.rules : {}"
                    class="t_edit_cell_form"
                    :ref="`formRef-${scope.$index}-${
                      item.prop || scope.column.property
                    }`"
                    @submit.native.prevent
                  >
                    <single-edit-cell
                      :configEdit="item.configEdit"
                      v-model="scope.row[scope.column.property]"
                      :prop="item.prop"
                      :record="scope"
                      @handleEvent="
                        (event, model) =>
                          $emit('handleEvent', event, model, scope.$index)
                      "
                      @Keyup="handleKeyup"
                      v-on="$listeners"
                      v-bind="$attrs"
                      ref="editCell"
                    >
                      <!-- 遍历子组件非作用域插槽，并对父组件暴露 -->
                      <template v-for="(index, name) in $slots" v-slot:[name]>
                        <slot :name="name" />
                      </template>
                      <!-- 遍历子组件作用域插槽，并对父组件暴露 -->
                      <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
                        <slot :name="name" v-bind="data"></slot>
                      </template>
                    </single-edit-cell>
                  </el-form>
                </template>
                <!-- 字典过滤 -->
                <template v-if="item.filters && item.filters.list">
                  {{
                  scope.row[item.prop]
                  | constantEscape(
                  table.listTypeInfo[item.filters.list],
                  item.filters.key || "dictValue",
                  item.filters.label || "dictLabel"
                  )
                  }}
                </template>
                <div
                  v-if="
                    !item.render &&
                    !item.slotName &&
                    !item.customRender &&
                    !item.canEdit &&
                    !item.filters
                  "
                  :style="{ color: txtChangeColor(scope) }"
                >
                  <span v-if="isObjShowProp">
                    {{
                    item.prop.includes(".")
                    ? scope.row[item.prop.split(".")[0]][
                    item.prop.split(".")[1]
                    ]
                    : scope.row[item.prop]
                    }}
                  </span>
                  <span v-else>{{ scope.row[item.prop] }}</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>
        <!-- 表头合并单元格 -->
        <t-table-column v-else :key="index + 'i'" :item="item">
          <template v-for="(index, name) in $slots" v-slot:[name]>
            <slot :name="name" />
          </template>
          <template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
            <slot :name="name" v-bind="data"></slot>
          </template>
        </t-table-column>
      </template>
      <slot></slot>
      <!-- 操作按钮 -->
      <el-table-column
        v-if="table.operator"
        :fixed="table.operatorConfig && table.operatorConfig.fixed"
        :label="(table.operatorConfig && table.operatorConfig.label) || '操作'"
        :min-width="
          (table.operatorConfig &&
            (table.operatorConfig.width || table.operatorConfig.minWidth)) ||
          100
        "
        :align="
          (table.operatorConfig && table.operatorConfig.align) || 'center'
        "
        class-name="operator"
      >
        <template slot-scope="scope">
          <div class="operator_btn" :style="table.operatorConfig && table.operatorConfig.style">
            <el-button
              v-for="(item, index) in table.operator"
              :key="index"
              @click="item.fun && item.fun(scope.row, scope.$index, tableData)"
              :type="item.type || 'text'"
              :style="item.style"
              :icon="item.icon ? item.icon : ''"
              :disabled="item.disabled"
              :size="item.size||'mini'"
              v-show="checkIsShow(scope, item)"
            >
              <!-- customRender渲染 -->
              <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>
              <!-- render渲染 -->
              <template v-if="item.render">
                <render-col
                  :column="item"
                  :row="scope.row"
                  :render="item.render"
                  :index="scope.$index"
                />
              </template>
              <span v-if="!item.render && !item.customRender">
                {{
                item.text
                }}
              </span>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="isEdit" class="edit_cell">
      <el-button type="dashed" block size="small" @click="() => $emit('add')">
        {{
        cellEditBtnTxt
        }}
      </el-button>
    </div>
    <!-- 分页器 -->
    <el-pagination
      v-show="tableData && tableData.length && isShowPagination"
      :current-page="table.currentPage"
      @current-change="handlesCurrentChange"
      :page-sizes="pageSizes"
      :page-size="table.pageSize"
      :layout="
        layoutSize
          ? 'total, prev, pager, next'
          : 'total, sizes, prev, pager, next, jumper'
      "
      :total="table.total"
      v-bind="$attrs"
      v-on="$listeners"
      background
    ></el-pagination>
    <!-- 表格底部按钮 -->
    <footer class="handle_wrap" v-if="isShowFooterBtn && tableData && tableData.length > 0">
      <slot name="footer" />
      <div v-if="!$slots.footer">
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </footer>
  </div>
</template>

6、源码地址

gitHub组件地址

gitee码云组件地址

相关文章

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

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