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>
相关推荐
技术钱1 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json
技术钱1 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
Flash Dog1 小时前
【Vue】——路由
vue.js
DoraBigHead2 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试
千码君20162 小时前
React Native:发现默认参数children【特殊的prop】
javascript·react native·ecmascript·react·组件树
羊羊小栈2 小时前
基于「多模态大模型 + BGE向量检索增强RAG」的航空维修智能问答系统(vue+flask+AI算法)
vue.js·人工智能·python·语言模型·flask·毕业设计
喝拿铁写前端3 小时前
Vue 组件通信的两种世界观:`.sync` 与普通 `props` 到底有什么不同?
前端·vue.js·前端框架
用户22152044278003 小时前
vue3组件间的通讯方式
前端·vue.js
tyro曹仓舒3 小时前
Vue单文件组件到底需不需要写name
前端·vue.js
Never_Satisfied4 小时前
在JavaScript / HTML中,line-height是一个CSS属性
javascript·css·html