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

大纲:

 
<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

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

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

类型：数组