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

大纲:

<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

<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/miniborder: 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>

<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。

类型：数组