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>
相关推荐
周亚鑫7 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二16 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y52364817 分钟前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
fruge30 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia39 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
嚣张农民1 小时前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
十一吖i1 小时前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
Rattenking1 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫2 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js