el-table二次封装及使用

最新推荐文章于 2025-04-12 22:37:40 发布

dong.wang

最新推荐文章于 2025-04-12 22:37:40 发布

阅读量1.4k

点赞数 3

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/wangdong9395/article/details/113882379

版权

Vue 专栏收录该内容

6 篇文章

订阅专栏

这是一个关于Vue.js的自定义表格组件ComTable的详细代码展示。组件支持复选、排序、自定义列模板和操作按钮，允许用户通过props传递表格列配置、数据、操作等信息，并提供点击事件回调。在使用示例中，展示了如何定义表格列、数据以及自定义状态列和操作列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ComTable组件

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" 
    :stripe="stripe" :border="border" :size="size"
    v-loading="loading"
    @selection-change="handleSelectionChange"
    >
    <!-- 是否支持复选 -->
    <el-table-column v-if="isSelection" width="55" type="selection" />
      <el-table-column
        :prop="item.param"
        :label="item.lable"
        v-for="(item, index) in tableColumns"
        :key="index"
        :sortable="item.sortable"
        :width="item.width"
      >
        <template slot-scope="scope">
          <span v-if="item.render">{{item.render(scope.row)}}</span>
          <slot v-else-if="item.slotName" :name="item.slotName" :scope="scope"></slot>
          <span v-else>{{scope.row[item.param]}}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column v-if="tableOperation.label" :label="tableOperation.label">
        <template slot-scope="scope">
            <slot :name="tableOperation.param" :scope="scope">
              <el-button
                size="small"
                v-for="(item, index) in tableOperation.btnList"
                :key="index"
                @click="handleClick(scope.row, item.type)">
                {{item.label}}
              </el-button>
            </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    tableColumns: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    tableOperation: {
      type: Object,
      default: () => {
        return {}
      }
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'small'
    },
    loading: {
      type: Boolean,
      default: false
    },
    isSelection: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick(row, type) {
      this.$emit('handleClick', row, type)
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    }
  }
}
</script>

组件的使用

<template>
  <div id="app">
    <ComTable :tableColumns="tableColumns" :tableData="tableData" 
    :tableOperation="tableOperation" @handleClick="handleClick"
    :isSelection="true">
      <template v-slot:status="props">
        <el-button type="danger" size="small">{{props.scope.row.status === 0 ? '启用' : '禁用'}}</el-button>
      </template>
      <!-- 自定义操作部分 -->
      <!-- <template v-slot:[tableOperation.param]="props">
        <span v-for="(item, index) in tableOperation.btnList" :key="index" @click="handleClick(props.scope.row, item.type)">{{item.label}}</span>
      </template> -->
    </ComTable>
  </div>
</template>

<script>
import ComTable from './components/ComTable.vue'

export default {
  name: 'App',
  components: {
    ComTable
  },
  data() {
    return {
      tableColumns: [
        {
          param: 'date',
          lable: '日期',
          sortable: true
        },
        {
          param: 'name',
          lable: '姓名',
        },
        {
          param: 'status',
          lable: '状态',
          slotName: 'status',
        },
        {
          param: 'address',
          lable: '地址',
          width: '400px'
        },
        {
          param: 'gender',
          lable: '性别',
          render: (row) => {
            return row.gender === 0 ? '女' : '男'
          }
        },
        
      ],
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            gender: 0,
            status: 0,
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            gender: 1,
            status: 1,
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            gender: 0,
            status: 1
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            gender: 0,
            status: 0
      }],
      tableOperation: {
        label: '操作',
        param: 'operate',
        childDefault: false,
        btnList: [
          {
            label: '编辑',
            type: 'edit'
          },
          {
            label: '删除',
            type: 'del'
          }
        ]
      },
    }
  },
  methods: {
    handleClick(row, type) {
      console.log(row, type)
      if(type === 'edit') {
        // 调用编辑逻辑
      }else if (type === 'del') {
        // 调用删除逻辑
      }
    }
  }
}
</script>