vue2中动态生成插槽

遍历数据动态生成插槽。

完整代码

<template>
	<baseTable
        :columns="listData.columns"
        :tableData="listData.tableData"
        :total="listData.total"
        :queryParams="listData.queryParams"
        @getList="getList(listData.listMethod)"
      >
      	 <!-- 
          根据数据中slot字段来确定是否生成插槽
          infoFlag字段标识是否有详情，如果有详情则可点击当前单元格查看详情，若没有详情则展示文本内容
          -->
        <template
          v-for="item in listData.columns"
          v-if="item.slot"
          :slot="item.slot"
          slot-scope="scope"
        >
          <u v-if="infoFlag && scope.row[item.key]">
            <a @click="getInfo(listData.infoMethod, scope)">
              {{ scope.row[item.key] }}
            </a>
          </u>
          <span v-else>
            {{ scope.row[item.key] }}
          </span>
        </template>
     </baseTable>
</template>

<script>
export default {
	data() {
		listData: {
        title: "分布区间",
        tableData: [],
        total: 0,
        // table列
        columns: [
          {
            label: "名称",
            key: "name",
            minWidth: 100,
            slot: "name",
          },
          {
            label: "<14数量",
            key: "lessThanFourteen",
            minWidth: 100,
            slot: "lessThanFourteen",
          },
          {
            label: "14-18数量",
            key: "fourteenToEighteen",
            minWidth: 100,
            slot: "fourteenToEighteen",
          },
          {
            label: "18-20数量",
            key: "eighteenToTwenty",
            minWidth: 100,
            slot: "eighteenToTwenty",
          },
          {
            label: "20-22数量",
            key: "twentyToTwentyTwo",
            minWidth: 100,
            slot: "twentyToTwentyTwo",
          },
          {
            label: "22-24数量",
            key: "twentyTwoToTwentyFour",
            minWidth: 100,
            slot: "twentyTwoToTwentyFour",
          },
          {
            label: ">=24数量",
            key: "greaterThanTwentyFour",
            minWidth: 100,
            slot: "greaterThanTwentyFour",
          },
        ],
        queryParams: {
          pageNum: 1,
          pageSize: 15,
        },
        listMethod: "getRangeList",
        infoMethod: "getRangeInfo", // 获取详情的方法
      }
	}
}
</script>

上述代码中：

1. :slot="item.slot" 动态绑定插槽名称
2. slot-scope="scope" slot-scope 属性指定一个变量名（我这里为scope），给作用域插槽提供数据