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

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

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