vue中如何给特殊字段设置插槽

大纲:

javascript 复制代码
<template>
  <div>
    <div>
      <span>卡号</span>
      <el-input type="text" v-model="cardNo" clearable placeholder="请输入卡号" />
      <el-button type="primary" plain icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <!-- 表格 -->
    <el-table class="fontTextStyle" border :header-cell-style="{background:'#f0f9eb'}" :data="data" style="width: 100%">
      <el-table-column align="center" prop="staffName" label="姓名"></el-table-column>
      <el-table-column align="center" prop="deptName" label="部门"></el-table-column>
      <el-table-column align="center" prop="cardNo" label="卡号" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column align="center" prop="termNo" label="设备号"></el-table-column>
      <el-table-column align="center" prop="datails" label="菜品">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="click">
            <el-tag size="small" style="margin-right: 10px;" v-for="item in scope.row.details" :key="item.pid">
              {{ item.name }} X {{ item.qty }}份
            </el-tag>
            <el-button type="text" slot="reference"> {{scope.row.details.length}}个菜品</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="amt" label="消费金额"></el-table-column>
      <el-table-column align="center" prop="balance" label="余额"></el-table-column>
      <el-table-column align="center" prop="payTime" label="支付时间" :show-overflow-tooltip="true"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import API from '@/components/common/Api'
  export default {
    data() {
      return {
        //查询参数
        pn: 1,
        ps: 10,
        count: 0,
        data: [],
        form: {},
        cardNo: '',//搜索键值
        datails: '',
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      search() {
        this.getList();
      },
      //获取智盘支付记录列表
      getList() {
        let params = {
          cardNo: this.cardNo,
        }
        API.getPosPayLog(params).then(result => {
          if (result.data && result.data.code == 0) {
            this.data = result.data.data.list || [];
            //循环遍历菜品
            this.data.forEach(item => {
              item.details = JSON.parse(item.details)
            })
            this.count = result.data.data.total
          }
        });
      },
    },
  }
</script>
<style></style>

代码详解:

代码中使用了 Element UI 的组件,包括 el-input(输入框)、el-button(按钮)、el-table(表格)、el-table-column(表格列)和 el-popover(气泡弹出框)等等。

🍕 第一步: 在页面初始化时,通过 mounted 钩子函数调用 getList 方法获取支付记录列表,并将结果保存在 data 数组中。当点击搜索按钮时,会触发 search 方法,该方法再次调用 getList 方法进行搜索。

🍕 第二步: getList 方法发送请求到后端接口,传递卡号作为参数。当接口返回数据后,将数据赋值给 data 数组,并使用 JSON.parse 将菜品详情从字符串解析为对象数组

🍕 第三步: 通过循环遍历 data 数组中的每一项,将菜品详情 item.details 解析为对象数组,以便在表格中展示。

🔴 **注意:**具体的接口返回的数据类型可能会有所不同,可以根据实际需求进行调整。

类型:字符串json

javascript 复制代码
<template>
  <div>
    <avue-crud ref="crud" v-model="form" :data="data" :option="option">
      <!-- 消费商品 -->
      <template slot-scope="scope" slot="payOrder">
        <el-popover trigger="click" title="" v-if="scope.row.payOrder.length">
          <div>
            <el-tag size="small" v-for="(item,index) in viewList" :key="index">
              {{ item.name }}X{{ item.num }}份
            </el-tag>
          </div>
          <el-button slot="reference" type="text" size="small" @click="getmenu(scope.row.payOrder)">
            {{ scope.row.payOrder.length }}个菜品
          </el-button>
        </el-popover>
        <div v-else>无</div>
      </template>
    </avue-crud>
  </div>
</template>

<script>
  import API from '@/components/common/Api';
  export default {
    data() {
      return {
        /* data:[]后端获取到的数据列表。option表格配置项.form 表单*/
        data: [],
        form: {},
        query: {}, //搜索键值
        viewList: [],
        option: {
          size: 'mini', //表格大小 medium/small/mini
          border: true,
          align: 'center',
          viewBtn: false, //查看详情按钮
          editBtn: false, //编辑修改按钮
          delBtn: false, //删除按钮
          addBtn: false,
          menu: false,
          column: [{
              label: '消费商品', //表头
              prop: 'payOrder', //键值
              slot: true,
            }]
        },
      }
    },
    mounted() {
      this.onLoad()
    },
    methods: {
      // 根据接口获取data数据
      onLoad() {
        let params = {
          data: this.query,
        }
        API.yktPosPayLogAll(params).then(res => {
          if (res.data.code == 0) {
            this.data = res.data.data.list;
            //循环遍历商品
            this.data.forEach(item => {
              item.payOrder = JSON.parse(item.payOrder);
            })
          }
        })
      },
      getmenu(arr) {
        this.viewList = arr;
      },
    }
  }
</script>

<style></style>
javascript 复制代码
<template>
    <avue-crud :option="option" :data="data" v-model="form" ref="crud">
      <template slot-scope="scope" slot="posFoodReserveDetail">
        <el-popover trigger="click" title="菜单">
          <div>
            <el-tag size="small" v-for="item in viewList" :key="item.foodId">
              {{ item.foodName }}X{{ item.reserveNum }}份
            </el-tag>
          </div>
          <el-button slot="reference" type="text" size="small" @click="getmenu(scope.row.posFoodReserveDetail)">
            {{ scope.row.posFoodReserveDetail.length }}个菜品
          </el-button>
        </el-popover>
      </template>
    </avue-crud>
</template>

<script>
  import API from '@/components/common/newApi';
  export default {
    data() {
      return {
        data: [],
        form: {},
        query: {},
        option: {
          border: true,
          column: [{
              label: '预定内容',
              prop: 'posFoodReserveDetail',
              slot: true,
              overHidden: true,
            }]
        },
        viewList: []
      };
    },
    mounted() {
      this.onLoad();
    },
    methods: {
      // 加载表格数据
      onLoad() {
        let param = {
          data: this.query
        };
        API.selectMyReserve(param).then(res => {
          if (res.data.code === 0) {
            this.data = res.data.data.list;
          }
        });
      },
     
      getmenu(arr) {
        this.viewList = arr;
      },
    }
  };
</script>

<style></style>

代码详解:

在这个插槽中,我使用了 el-popover 组件来显示菜单信息,并通过点击按钮触发了 getmenu 方法。根据我这边的业务需求,我将在点击按钮时调用 getmenu 方法,并将传入的 scope.row.posFoodReserveDetail 赋值给 viewList。

类型:数组

相关推荐
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理9 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef0610 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端11 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder12 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句12 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom12 小时前
JavaScript reduce()函数详解
javascript
小飞悟12 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子13 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript