快捷導(dǎo)航

詳解vue如何給特殊字段設(shè)置插槽

更新時間：2023年09月13日 10:50:15 作者：明思齊

這篇文章主要為大家詳細介紹了vue如何實現(xiàn)給特殊字段設(shè)置插槽,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以學(xué)習(xí)一下

大綱:

<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="設(shè)備號"></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 {
        //查詢參數(shù)
        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 || [];
            //循環(huán)遍歷菜品
            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 鉤子函數(shù)調(diào)用 getList 方法獲取支付記錄列表，并將結(jié)果保存在 data 數(shù)組中。當點擊搜索按鈕時，會觸發(fā) search 方法，該方法再次調(diào)用 getList 方法進行搜索。

第二步： getList 方法發(fā)送請求到后端接口，傳遞卡號作為參數(shù)。當接口返回數(shù)據(jù)后，將數(shù)據(jù)賦值給 data 數(shù)組，并使用 JSON.parse 將菜品詳情從字符串解析為對象數(shù)組。

第三步：通過循環(huán)遍歷 data 數(shù)組中的每一項，將菜品詳情 item.details 解析為對象數(shù)組，以便在表格中展示。

注意：具體的接口返回的數(shù)據(jù)類型可能會有所不同，可以根據(jù)實際需求進行調(diào)整。

類型：字符串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:[]后端獲取到的數(shù)據(jù)列表。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: {
      // 根據(jù)接口獲取data數(shù)據(jù)
      onLoad() {
        let params = {
          data: this.query,
        }
        API.yktPosPayLogAll(params).then(res => {
          if (res.data.code == 0) {
            this.data = res.data.data.list;
            //循環(huán)遍歷商品
            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: '預(yù)定內(nèi)容',
              prop: 'posFoodReserveDetail',
              slot: true,
              overHidden: true,
            }]
        },
        viewList: []
      };
    },
    mounted() {
      this.onLoad();
    },
    methods: {
      // 加載表格數(shù)據(jù)
      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 組件來顯示菜單信息，并通過點擊按鈕觸發(fā)了 getmenu 方法。根據(jù)我這邊的業(yè)務(wù)需求，我將在點擊按鈕時調(diào)用 getmenu 方法，并將傳入的 scope.row.posFoodReserveDetail 賦值給 viewList。

類型：數(shù)組