表格的封装，vue3+TS+Elemntui

内向蛋挞

已于 2023-03-23 19:34:43 修改

阅读量246

点赞数

分类专栏： ts 文章标签： javascript

于 2022-12-12 11:25:29 首次发布

本文链接：https://blog.csdn.net/m0_62330492/article/details/128284525

版权

ts 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<template>
  <div>
    <el-table  ref="multipleTableRef" :data="tableData" style="text-align: center; width: 100% "
      @selection-change="handleSelectionChange">
      <!-- 复选框 -->
      <el-table-column type="selection" v-if="isTypeSelection" width="55" />
      <!-- 表格内容 -->
      <el-table-column 
      style="white-space: pre-wrap;"
      v-for="item in tableHeader" 
      :label="item.label" 
      :property="item.prop"
      :width="item.width || 'auto'"
      :show-overflow-tooltip="tooltip">
        <template #default="scope">
          <el-switch 
          v-if="item.type === 'switch'" 
          v-model="scope.row.is_use" 
          class="mb-2" 
          active-color="green"
          :active-value="1"
          :inactive-value="0" 
          inactive-color="#ccc"
          @change="$emit(item.event!, { id: scope.row.id, is_use: scope.row.is_use })" />
          <!-- 按钮组件的单个按钮 -->
          <div v-else-if="item.type === 'button'">
            <span v-for="(btn, index) in item.buttons" :key="index">
              <el-button link :type="btn.type" size="small" @click="$emit(btn.event, scope.row)">{{ btn.text }}</el-button>
              <span v-if="index !== 2 && item.buttons.length > 3 && index !== 5">|</span>
            </span>
          </div>

          <span v-else-if="item.type === 'text'" @click="$emit(item.event!, scope.row)">
            {{ scope.row.text }}
          </span>
          <span v-else>
            {{ item.formatter ? item.formatter(scope.row) : scope.row[item.prop!] }}
          </span>
        </template>
        
      </el-table-column>
      
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import type { ITableHead } from "@/types/examination/test";
const props = withDefaults(defineProps<{
  isTypeSelection?: boolean,
  tooltip?: boolean
  tableHeader: any[],
  tableData: any[]
}>(), {
  isTypeSelection: true,
  tooltip: false,
  tableHeader: () => [],
  tableData: () => []
})
console.log(props);


interface User {
  date: string
  name: string
  address: string
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
</script>

<style scoped>
.el-button {
  margin: 0 5px;
  
}
</style>