间接使用封装好的el-table时,插槽如何使用

·场景:Page需要使用PageLayout组件,PageLayout中使用了封装好el-table的组件Table,现需要给表格中的cell添加点击事件,所以需要插槽来进行传值。
·代码:
组件Table

<template>
  <!-- 表格分页 -->
  <div class="table_box">
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        v-for="(item, index) in columns"
        :key="index"
        :fixed="item.fixed"
        :width="item.width"
        :sortable="item.sortable"
        :min-width="item.minWidth"
      >
        <template slot-scope="scope">
          <slot v-if="item.slot" :row="scope.row" :name="item.slot"></slot>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableData: Array,
    columns: Array,
    total: Number,
    currentPage: Number,
    flag: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // currentPage: 1,
    };
  },
  created() {},
  methods: {
    handleSizeChange(val) {
      this.$emit("changeSize", val);
    },
    handleCurrentChange(val) {
      this.$emit("changeCurrent", val);
    },
    //表单选择全选
    handleSelectionChange(val) {
      // console.log(val, "0.0");
      this.$emit("handleSelectionChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  // margin-top: 20px;
  padding: 10px 20px;
  text-align: right;
  // box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
  background: #fff;
}
</style>

组件PageLayout

<Table :columns="pageData.tableConfig.columns" :tableData="pageData.tableConfig.data" :total="pageData.tableConfig.total" @currentChange="currentChange" :isShow="pageData.tableConfig.isShow" :current="currentPage" :objectSpanMethod="pageData.tableConfig.objectSpanMethod">
                    <template v-for="(tItem) in pageData.tableConfig.columns" :slot="tItem.slot" slot-scope="scope">
                      <template v-if="tItem.slot">
                        <slot :name="tItem.slot" :row="scope.row"></slot>
                      </template>
                    </template>
                  </Table>

组件Page

<Layout :config="config" @tabChange="tabChange" @currentChange="currentChange" @scrollLoad="scrollLoad" @updateCurrentPage="updateCurrentPage" v-bind="$attrs" v-loading="layoutLoading" @closeDrawer="closeDrawer" :openDrawer="openDrawer">
      <template v-for="(item,index) in config.tableConfig.columns" :slot="item.slot" slot-scope="scope">
        <div v-if="item.slot" :key="index">
          <el-button type="text" @click="jumpPage(scope.row[item.slot],item.slot,scope.row)">{{scope.row[item.slot]}}</el-button>
        </div>
      </template>
    </Layout>
     //表格数据
    tableConfig: {
        isShow: true,
        columns: [{
                prop: "caseType",
                label: "诉讼类型",
                align: "center",
            },
            {
                prop: "caseNum",
                label: "诉讼数量",
                align: "center",
            },
            {
                slot: "percent",
                label: "占比",
                align: "center",
            }
        ],
        data: [],
        total: 0,
    },
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值