【2022-10-09】elementUI el-table组件封装（可传参、多级表头、slot的使用）已验证有效

shangrila-xiu

已于 2022-10-09 18:00:21 修改

阅读量513

点赞数

文章标签： ui vue.js javascript

于 2022-09-23 17:01:38 首次发布

本文链接：https://blog.csdn.net/lyx9611/article/details/127014376

版权

"本文介绍了Vue3与Vue2中模板语法的不同，特别是``的用法。通过一个具体的子组件`childTable`示例，展示了如何处理表格列的动态渲染，包括子组件的递归使用和插槽的传递。在父组件中，`childTable`被用于动态渲染表格列，并通过`v-slot`指令使用自定义插槽。此外，还给出了组件的使用方式和传参格式。"

摘要由CSDN通过智能技术生成

注意：

vue3和vue2可能这里不一样：<template #default="scope">

子组件

<template>
    <el-table-column
      :type="col.type || null"
      :prop="col.prop"
      :label="col.label"
      :header-align="headAlign"
      :width="col.width || null">
        <template #default="scope">
          <template v-if="col.children && col.children.length!==0">
            <childTable v-for="(item, i) in col.children"
                        :key=" item.prop + i"
                        :headAlign="headAlign || subHeadAlign"
                        :col="item"></childTable>
          </template>
          <template v-else-if="col.slot">
            <template v-if="col.slotName">
              <slot :data="scope.row" :name="col.slotName"></slot>
            </template>
          </template>
          <template v-else>{{scope.row[col.prop]}}</template>
        </template>
    </el-table-column>
</template>

<script>
  export default {
    name: "childTable",
    props: {
      col:{
        type:[Object],
        default:()=>{
          return {}
        }
      },
      headAlign:{
        type:[String],
        default:"left"
      },
      subHeadAlign:{
        type:[String],
        default:"left"
      }
    },
    data() {
      return {};
    },
    components: {},
    mounted() {
    },
    methods: {},
  }
</script>

<style scoped lang="scss">

</style>

父组件

<template>
    <el-table
      :data="tableData"
      :border="border"
      :stripe="stripe"
      height="100%"
      style="width: 100%">
      <child :headAlign="headAlign" :subHeadAlign="subHeadAlign"  v-for="(item,index) in columns" :key="index" :col="item">
        <template v-slot:[item.slotName]="row">
          <slot :data="row.data" :name="item.slotName"></slot>
        </template>
      </child>
    </el-table>
</template>

<script>
  import child from "@/component/elTableCom/childTable.vue"
  export default {
    name: "elTableCom",
    props: {
      tableData:{
        type:[Array],
        default:()=>{
          return []
        }
      },
      columns:{
        type:[Array],
        default:()=>{
          return []
        }
      },
      border:{
        type:[String,Boolean],
        default:false
      },
      stripe:{
        type:[String,Boolean],
        default:false
      },
      headAlign:{
        type:[String],
        default:"left"
      },
      subHeadAlign:{
        type:[String],
        default:"left"
      }
    },
    data() {
      return {
      };
    },
    components: {child},
    mounted() {
    },
    methods: {
    },
  }
</script>

<style scoped lang="scss">
</style>

组件使用传参格式

{
  "success": true,
  "msg": "",
  "data": {
    "columns": [
      {
        "prop": "prop1",
        "label": "label1"
      },
      {
        "label": "label2",
        "prop": "prop2"
      },
      {
        "label": "label3",
        "prop": "prop3"
      },
      {
        "label": "详情",
        "slot": true,
        "slotName":"isImg"
      }
    ],
    "tableData": [
      {
        "prop1": "某某某1",
        "prop2": 8834,
        "prop3": 223,
        "url": "https://xxx"
      }
    ]
  }
}

使用

<tableCom :columns="columns" :tableData="tableData">
                <template v-slot:isImg="row">
                  <div style="text-align: center;cursor: pointer" @click="handleClick(row.data)">
                    <img width="14" src="xxx.png" alt="">
                  </div>
                </template>
              </tableCom>