关于javascript:elementui开发-选择赠品弹层中的数据并展示在页面上弹层展示选中状态

33次阅读

共计 2737 个字符，预计需要花费 7 分钟才能阅读完成。

最近在开发一个性能：有一个赠品弹层，外面能够抉择赠品，点击确定，可将选中的赠品展现在页面上。页面上的赠品列表有删除按钮，能够删除对应的数据，并且赠品弹层对应的那条数据勾销选中。
上面是代码:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>element-ui 开发: 选中赠品弹层中的数据并展现在页面上，弹层展现选中状态 </title>
  <!-- 引入 element-ui 的款式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入 element 的组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-button type="primary" @click="addGiftFun"> 增加赠品 </el-button>

    <div v-if="livGiftList.length > 0">
      <el-table :data="livGiftList" border style="width: 500px">
        <el-table-column label="赠品名称" align="center" min-width="80">
          <template slot-scope="{row}">
            <span>{{row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="60">
          <template slot-scope="scope">
            <el-button @click="delGiftFun(scope.$index, livGiftList)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="请抉择赠品" :close-on-click-modal="false" :visible.sync="isShow" width="500px">
      <el-table :data="giftProdctList" border style="width: 500px">
        <el-table-column label="赠品名称" align="center" min-width="80">
          <template slot-scope="{row}">
            <span>{{row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="赠品价格" align="center" min-width="80">
          <template slot-scope="{row}">
            <span>{{row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="60">
          <template slot-scope="{row}">
            <el-checkbox v-model="row.checked">{{row.checked ? "已抉择" : "抉择"}}</el-checkbox>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="footer">
        <el-button class="cancel-style" size="small" @click="isShow = false"> 取 消 </el-button>
        <el-button type="primary" @click="submitFun"> 确 认 </el-button>
      </div>
    </el-dialog>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 管制弹层显示和暗藏
          isShow: false,
          // 页面上展现的赠品列表
          livGiftList: [],
          // 模仿赠品列表 ajax 数据
          giftProdctListCopy: [
            {
              name: "测试 1",
              price: 1,
              id: 1
            },
            {
              name: "测试 2",
              price: 10,
              id: 2
            },
            {
              name: "测试 3",
              price: 9,
              id: 3
            },
            {
              name: "测试 4",
              price: 3,
              id: 4
            },
          ],
          // 赠品弹层
          giftProdctList: []}
      },
      methods: {
        // 增加赠品按钮
        addGiftFun() {
          this.isShow = true;
          let checkedList = this.livGiftList;
          // 获取到页面展现的赠品列表，拿到赠品 id 汇合
          checkedId = checkedList.map((item) => {return item.id})
          // 模仿 ajax 申请: JSON.parse(JSON.stringify(this.giftProdctListCopy))
          // 渲染赠品弹层数据并且高亮被选中的赠品
          this.giftProdctList = JSON.parse(JSON.stringify(this.giftProdctListCopy)).map((item) => ({
            ...item,
            // 高亮被选中的赠品
            checked: checkedId.includes(item.id)
          }));
          console.log(this.giftProdctList, 'giftProdctList')
        },
        // 赠品弹层点击确认
        submitFun() {
          this.isShow = false;
          this.livGiftList = this.giftProdctList.filter((item) => {return item.checked;})
          console.log(this.livGiftList, 'this.livGiftList')
        },
        // 删除赠品
        delGiftFun(index, row) {row.splice(index, 1)
        },
      }
    })
  </script>
</body>

</html>

正文完