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>
相关推荐
DJA_CR几秒前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
小旋风0123417 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
旧味清欢|21 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据1 小时前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
三翼鸟数字化技术团队3 小时前
Vue自定义指令最佳实践教程
前端·vue.js
猿榜3 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript