vue插槽作用域

子组件在slot上面写自定义属性="数据"

父组件在调用子组件中间写template标签，使用slot-scope="自定义属性"

实例代码：

子组件内容

<template>
  <div>
    <h1>作用域插槽</h1>
    <p v-for="item in list" :key="item.name">
      {{ item.name }}
      今年 {{ item.age }}岁
      <!-- <slot :子自定义属性="数据"></slot> -->
      <slot :row="item"></slot>
    </p>
  </div>
</template>

<script>
export default {
  //用props来接收父组件传递过来的数据
  props: {
    list: {
      type: Array
    }
  }
}
</script>

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

父组件内容

<template>
  <div>
    <h1>插槽</h1>
    <slot-scope :list="list">
      <!-- <template slot-scope="父自定义属性"></template> -->
      <template slot-scope="scope"> 性别是{{ scope }} </template>
    </slot-scope>
  </div>
</template>

<script>
import SlotScope from "./components/slot-scope/SlotScope.vue";
export default {
  components: {
    SlotScope,
  },
  data() {
    return {
      list: [
        {
          name: "小鱼",
          age: 12,
          sex: "女",
        },
        {
          name: "小黑",
          age: 13,
          sex: "男",
        },
        {
          name: "小白",
          age: 14,
          sex: "女",
        },
      ],
    };
  },
};
</script>

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

打印结果

 更改template标签显示的值就能拿到你想要的值了

<template slot-scope="scope"> 性别是{{ scope.row.sex }} </template>

在Element-ui中也有非常多哦

使用ui框架

<template>
  <el-card class="accont-list">
    <div slot="header">
      <span>账号列表</span>
    </div>
    <div class="content">
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <!-- prop对应列的字段名 -->
        <!-- 账号 -->
        <el-table-column label="账号" prop="account"> </el-table-column>
        <!-- 用户组 -->
        <el-table-column label="用户组" prop="userGroup"> </el-table-column>
        <!-- 创建时间 -->
        <el-table-column label="创建时间" prop="date"> </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        class="pagination"
      >
      </el-pagination>
      <!-- 操作按钮 -->
      <div class="bottom-box">
        <el-button type="danger" size="small">批量删除</el-button>
        <el-button type="primary" size="small">取消选择</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "AccountList",
  data() {
    return {
      // 列表数据
      tableData: [
        {
          account: "皮卡丘",
          userGroup: "超级管理员",
          date: "2022/5/13",
        },
        {
          account: "皮卡丘",
          userGroup: "超级管理员",
          date: "2022/5/13",
        },
        {
          account: "皮卡丘",
          userGroup: "超级管理员",
          date: "2022/5/13",
        },
      ],
      currentPage4: 1,
    };
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {},
    handleEdit(index, row) {
      console.log(`index`, index);
      console.log(`row`, row);
    },
    handleDelete(index, row) {
      console.log(`index`, index);
      console.log(`row`, row);
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom-box,
.pagination {
  margin-top: 20px;
}
</style>

点击编辑打印结果展示