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>
相关推荐
mCell3 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip3 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping9 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风10 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780010 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端10 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧10 小时前
Promise 的使用
前端·javascript
用户516816614584112 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅12 小时前
JavaScript 作用域
前端·javascript
前端缘梦12 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试