Vue實(shí)現(xiàn)單桌，拼桌，并桌功能

首先，桌位上如果已點(diǎn)餐，會有點(diǎn)餐時間tableInterval，作為是否為空位的標(biāo)識
1.單桌
只能選擇空桌（空桌即沒有tableInterval的），只能選擇一個
2.拼桌
選擇有tableInterval的，可以選擇無限個，進(jìn)行拼桌
3.并桌
選擇空桌進(jìn)行并桌，不限個數(shù)
4.同時選擇到的桌位高亮

5.麻煩大神幫忙實(shí)現(xiàn)一下，，真的布吉島怎么寫┭┮﹏┭┮

回答

編輯回答

葬憶

根據(jù)選擇的類型，要么直接把不符合要求的直接過濾掉，或者在點(diǎn)擊的時候進(jìn)行判斷

2018年2月23日 19:38

編輯回答

孤毒

直接復(fù)制粘貼便可看到效果： 注重理解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>注意細(xì)節(jié)</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      li {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid gray;
        cursor: pointer;
        margin-left: 5px;
        border-radius: 5px;
      }
      ul.types li.active {
        border: 1px solid #0078d7;
        background-color: #0078d7;
        color: #fff;
      }
      ul.selects li.active {
        border: 1px solid #0078d7;
        background-color: #0078d7;
        color: #fff;
      }
      ul.selects li.disabled {
        border: 1px solid #999;
        background-color: #999;
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>選擇桌子:</p>
      <ul class="types">
        <li v-for="(item, index) in typesList" :class="{ active: index == result.types_value }" @click="typesEvent(index)">{{item.types}}</li>
      </ul>
      <p>可供選擇的桌子：</p>
      <ul class="selects">
        <!-- 注意綁定的class的寫法 -->
        <li v-for="(item, index) in selectList" :class="{ disabled: result.types_value != 1 && item.time > 0 , active: result.select.indexOf(item.id) >= 0 }" @click="selectEvent(item)">
          <p>{{item.title}}</p>
          <p>
            <span v-if="item.time > 0">{{item.time}}分鐘</span>
            <span v-else>無客</span>
            <span>{{item.price}}元</span>
          </p>
        </li>
      </ul>
      <p>結(jié)果數(shù)組：(數(shù)組內(nèi)的數(shù)字對應(yīng)已選中的桌子的id)</p>
      {{result.select}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          typesList: [  //選桌類型數(shù)組
          {
            types: "單桌",
            value: 0
          },
          {
            types: "拼桌",
            value: 1
          },
          {
            types: "并桌",
            value: 2
          }
          ],
          selectList: [ //可供選擇桌子數(shù)組
          {
            title: "1號桌",
            id: 1,
            time: 55,
            price: 12
          },
          {
            title: "2號桌",
            id: 2,
            time: 0,
            price: 22
          },
          {
            title: "3號桌",
            id: 3,
            time: 5,
            price: 102
          },
          {
            title: "4號桌",
            id: 4,
            time: 0,
            price: 120
          }
          ],
          result: { //選擇結(jié)果數(shù)組
            types_value: 0,
            select: []
          }
        },
        methods: {
          typesEvent(index) {  //選類型觸發(fā)事件
            if(index == this.result.types_value) {
              return false;   //防止重復(fù)點(diǎn)擊已選中類型時清空數(shù)據(jù)
            }
            this.result.select = [];  //清空之前選擇的數(shù)據(jù)
            this.result.types_value = index; //給當(dāng)前點(diǎn)擊的類型添加active
          },
          selectEvent(item) {
            let _this = this;
            if(_this.result.types_value != 1 && item.time > 0) { //對單桌和并合桌中已經(jīng)有時間的桌進(jìn)行禁止點(diǎn)擊操作
              return false;
            }
            if(_this.result.types_value == 0) { //單獨(dú)處理單桌的情況，單桌僅允許結(jié)果數(shù)組中只有一條數(shù)據(jù),且再次點(diǎn)擊同一個時取消選中
              _this.result.select = _this.result.select.indexOf(item.id) >= 0 ? [] : [item.id];
              return true;
            }
            let buff_id = _this.result.select.indexOf(item.id); //獲取當(dāng)前點(diǎn)擊的是否已被選取，若已選取，則是取消選擇操作
            if(buff_id >= 0) {
              _this.result.select.splice(buff_id,1);
              return true;
            }
            _this.result.select.push(item.id); //能執(zhí)行到這里表示該條未被選中，現(xiàn)在添加到結(jié)果數(shù)組中去
            return true;
          }
        }
      });
    </script>
  </body>
</html>

Vuex版本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>注意細(xì)節(jié)</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      li {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid gray;
        cursor: pointer;
        margin-left: 5px;
        border-radius: 5px;
      }
      ul.types li.active {
        border: 1px solid #0078d7;
        background-color: #0078d7;
        color: #fff;
      }
      ul.selects li.active {
        border: 1px solid #0078d7;
        background-color: #0078d7;
        color: #fff;
      }
      ul.selects li.disabled {
        border: 1px solid #999;
        background-color: #999;
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>選擇桌子:</p>
      <ul class="types">
        <li v-for="(item, index) in typesList" :class="{ active: index == types_value }" @click="typesEvent(index)">{{item.types}}</li>
      </ul>
      <p>可供選擇的桌子：</p>
      <ul class="selects">
        <!-- 注意綁定的class的寫法 -->
        <li v-for="(item, index) in selectList" :class="{ disabled: types_value != 1 && item.time > 0 || types_value == 1 && item.time <= 0, active: store.getters.getSelectId(item.id) }" @click="selectEvent(item)">
          <p>{{item.title}}</p>
          <p>
            <span v-if="item.time > 0">{{item.time}}分鐘</span>
            <span v-else>無客</span>
            <span>{{item.price}}元</span>
          </p>
        </li>
      </ul>
      <p>結(jié)果數(shù)組：(數(shù)組內(nèi)的數(shù)字對應(yīng)已選中的桌子的id)</p>
      {{store.state.result}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script>
      const store = new Vuex.Store({
        state: {
          types_value: 0,
          result: []
        },
        mutations: {
          saveResult(state, payload) {
            state.result = payload.data;
          },
          saveTypesValue(state, payload) {
            state.types_value = payload.index;
          },
          deleteResult(state, payload) {
            for(let i = 0; i < state.result.length; i++) {
              if(state.result[i].id === payload.id) {
                state.result.splice(i,1);
                break;
              }
            }
          },
          pushResult(state, payload) {
            state.result.push(payload.data);
          }
        },
        getters: {
          getSelectId: (state) => (id) => {
            return state.result.find(item => item.id === id);
          }
        }
      });
      new Vue({
        el: '#app',
        data: {
          typesList: [  //選桌類型數(shù)組
          {
            types: "單桌",
            value: 0
          },
          {
            types: "拼桌",
            value: 1
          },
          {
            types: "并桌",
            value: 2
          }
          ],
          selectList: [ //可供選擇桌子數(shù)組
          {
            title: "1號桌",
            id: 0,
            time: 55,
            price: 12
          },
          {
            title: "2號桌",
            id: 1,
            time: 0,
            price: 22
          },
          {
            title: "3號桌",
            id: 2,
            time: 5,
            price: 102
          },
          {
            title: "4號桌",
            id: 3,
            time: 0,
            price: 120
          }
          ]
        },
        computed: {
          types_value() {
            return store.state.types_value;
          }
        },
        methods: {
          typesEvent(index) {  //選類型觸發(fā)事件
            if(index == this.types_value) {
              return false;   //防止重復(fù)點(diǎn)擊已選中類型時清空數(shù)據(jù)
            }
            store.commit({
              type: "saveResult",
              data: []
            })  //清空之前選擇的數(shù)據(jù)
            store.commit({
              type: "saveTypesValue",
              index: index
            }) //給當(dāng)前點(diǎn)擊的類型添加active
          },
          selectEvent(item) {
            let _this = this;
            if(_this.types_value != 1 && item.time > 0 || _this.types_value == 1 && item.time <= 0) { //對單桌和并合桌中已經(jīng)有時間的桌進(jìn)行禁止點(diǎn)擊操作
              return false;
            }
            if(_this.types_value == 0) { //單獨(dú)處理單桌的情況，單桌僅允許結(jié)果數(shù)組中只有一條數(shù)據(jù),且再次點(diǎn)擊同一個時取消選中
              store.commit({
                type: "saveResult",
                data: store.getters.getSelectId(item.id) ? [] : [_this.selectList[item.id]]
              });
              return true;
            }
            if(store.getters.getSelectId(item.id)) {
              store.commit({
                type: "deleteResult",
                id: item.id
              });
              return true;
            }
            store.commit({
                type: "pushResult",
                data: _this.selectList[item.id]
              }); //能執(zhí)行到這里表示該條未被選中，現(xiàn)在添加到結(jié)果數(shù)組中去
            return true;
          }
        }
      });
    </script>
  </body>
</html>