Vue2+TS el-table简单封装 和 使用

1.封装的组件写法

javascript 复制代码
<template>
  <div style="height: calc( 100% - 33px);width:100%;position:relative">
    <!-- 权限管理标题显示与否 -->
    <div ref="operationBtnbox" class="operation-Btn-box" v-if="showOperationBtn">
      <div class="operation-title">
        <svg-icon :icon-class="tableConfigure.imgSrc"></svg-icon>
        <p>{{ $t(tableConfigure.tableTitle) }}</p>
      </div>
      <el-row class="optionBtnBox">
        <slot name="optionBtns" v-bind:currentSelectedRows="1"></slot>
      </el-row>
    </div>
    <!-- 封装表格 -->
    <el-table ref="singleTable" :data="tableData" @row-click="getNowRow" @selection-change="getSelectedData" :highlight-current-row="true"
      @current-change="handleCurrentChange" :border="true" :header-cell-style="tableHeaderStyle">
      <slot name="table_content"></slot>
    </el-table>
  </div>
</template>
javascript 复制代码
  public changeSelected(row) {
    ;(this.$refs.singleTable as any).toggleRowSelection(row)
  }
  //表头样式
  private tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
    if (rowIndex === 0) {
      return `
       background-color: var(--lyl_vxetableTitleColor);
       color: #606266;
       font-size:16px;
       `
    }
  }
  //接收初始化数据
  @Prop({
    required: true,
    default: []
  })
  tableData: any

  //接收标题数据,可以初始化自定义
  @Prop({
    default: () => {
      return {
        tableTitle: 'i18n.route_authManager',
        imgSrc: 'jurisdiction_small'
      }
    }
  })
  tableConfigure: any

  //接收标题是否显示的 boolean 控制
  @Prop({
    default: true
  })
  showOperationBtn: boolean


  private currentRow: any = null

  private handleCurrentChange(val) {
    this.currentRow = val
  }

  // 获取选中行的数据
  private getSelectedData(data) {
    this.selectedData(data)
    // console.log('getSelectedData:', data)
  }

  private async getNowRow(e) {
    ;(this.$refs.singleTable as any).toggleRowSelection(e)
    // let es = JSON.parse(JSON.stringify(e))
    this.onSure(e)
  }

  @Emit('onSure')
  private onSure(data) {}

  @Emit('selectedData')
  private selectedData(data) {}

2.使用

javascript 复制代码
//引入
import elemtTabel from '../../../components/elementTable/index.vue'


//注册
@Component({
  components: {
    elemtTabel,
  }
})

//使用
   <elemtTabel :tableData="roleTableData" @onSure="nowRowDataFn" :showOperationBtn="false">
        <template v-slot:table_content>
          <el-table-column align="center" width="65">
            <template slot-scope="scope">
              <el-radio class="radio" v-model="radio" :label="scope.$index"></el-radio>
            </template>
          </el-table-column>
         
          <!-- 操作 -->
          <el-table-column align="center" :label="$t('i18n.option')">
            <template slot-scope="scope">
              <!-- 编辑 -->
              <span class="span_button" @click.stop="editRole(scope.row)" v-if="buttons.findIndex((item) => item == '编辑') > -1 || $store.state.system.currentUserInfo.id == 'admin'">{{ $t('i18n.editBtn') }}</span>
              <!-- 删除 -->
              <span class="span_button" @click="deleteRole" v-if="buttons.findIndex((item) => item == '删除') > -1 || $store.state.system.currentUserInfo.id == 'admin'">{{ $t('i18n.deleteBtn') }}</span>
            </template>
          </el-table-column>
        </template>
      </elemtTabel>
相关推荐
wordbaby14 分钟前
用 window.matchMedia 实现高级响应式开发:API 全面解析与实战技巧
前端·javascript
薄雾晚晴19 分钟前
Rspack 实战,构建流程升级:自动版本管理 + 命令行美化 + dist 压缩,一键输出生产包
前端·javascript
Running_slave25 分钟前
位运算左移右移应该怎么玩?
前端·javascript·算法
晚星star25 分钟前
在 Web 前端实现流式 TTS 播放
前端·vue.js
薄雾晚晴25 分钟前
Rspack 性能优化实战:JS/CSS 压缩 + 代码分割,让产物体积直降 40%
前端·javascript
本末倒置18326 分钟前
前端面试高频题:18个经典技术难点深度解析与解决方案
前端·vue.js·面试
秃顶老男孩.1 小时前
web中的循环遍历
开发语言·前端·javascript
快起来搬砖了1 小时前
实现一个优雅的城市选择器组件 - Uniapp实战
开发语言·javascript·uni-app
可子是我的小猫1 小时前
【JS】模块(一)
javascript
不一样的少年_2 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js