vue项目自定义复选框、引用vuetify组件相关的一系列问题汇总、日期组件、表格组件

图例：

一、

<template>
<div class="moreSelect">
            <div
              class="moreSelectLi"
              v-for="(item, index) in riskDataList"
              :key="index"
              :class="{ liActive: checkedGroup.includes(item.value) }"
              @click="selChange(item.value)"
            >
              <div
                class="picBg"
                :class="{ picBgActive: checkedGroup.includes(item.value) }"
              ></div>
              <div>{{ item.label }}</div>
            </div>
          </div>
</template>
<script>
data: () => ({
riskDataList: [
      {
        value: 2,
        label: '低风险'
      },
      {
        value: 3,
        label: '中风险'
      },
      {
        value: 4,
        label: '高风险'
      },
      {
        value: 5,
        label: '极高风险'
      }
    ],
checkedGroup: [2]
}),
methods:{
selChange(value) {
      if (this.checkedGroup.includes(value)) {
        if (this.checkedGroup.length === 1) {
          return
        }
        this.checkedGroup = this.checkedGroup.filter(function (ele) {
          return ele !== value
        })
      } else {
        this.checkedGroup.push(value)
      }
    },
}
</script>
<style lang="less" scoped>
.moreSelect {
      display: flex;
      margin-top: 16px;
      margin-bottom: 24px;
      .moreSelectLi {
        width: 72px;
        height: 32px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        font-size: 12px;
        color: #595959;
        margin-right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .picBg {
          width: 12px;
          height: 12px;
          border: 1px solid #dbd6d1;
          margin-right: 6px;
          background: url("~@/assets/unselected.png") center center no-repeat;
          background-size: 100% 100%;
        }
        .picBgActive {
          width: 12px;
          height: 12px;
          border: 1px solid #0b41cd;
          margin-right: 6px;
          background: url("~@/assets/pitchon.png") center center no-repeat;
          background-size: 100% 100%;
        }
      }
      .moreSelectLi:nth-last-child(1) {
        width: 84px;
      }
      .liActive {
        border: 1px solid #0b41cd;
      }
    }
</style>

附加一段ui组件单选框、复选框、时间组件有时候数据变化未实时更新问题，以下问题与上面无关

采用$set方法进行更新

this.questInfoOne.forEach((item) => {
                if (item.answerContent !== undefined) {
                  item.answerContent = JSON.parse(item.answerContent)
                } else {
                  item.answerContent = this.$set(item, 'answerContent', JSON.parse('[]'))
 // item.answerContent = this.$set(item, 'answerContent', '') 
                }
            })

computed指令未重新set问题

computed: {
    dateOneFlag: {
      get: function () {
        return this.editDateFlag()  
        //指令中一般不可以进行逻辑判断，所以将逻辑写在下面methods方法中
      },
      set: function (v) {
        this.dataCompuFlag = v
      }
    }
  },
data: () => ({
dataCompuFlag: false
}),
methods:{
editDateFlag() {
      if (this.tabsValue === 0) {
        if (this.intoRiskValue.length === 2) {
          this.dataCompuFlag = false
        } else if (this.intoRiskValue.length === 1) {
          this.dataCompuFlag = true
        }
      }
      return this.dataCompuFlag
    }
}

vue项目中，一个页面循环生成多个vuetify日期组件，页面上会弹出多个日期框，解决绑定questMenu1为[]

<div
                        class="formQuestionData"
                        style="position: relative"
                        id="dateAllOne"  //滚动滚动条，让组件框跟随页面一起移动
                      >
                        <v-row cols="12" style="width: 410px">
                          <v-col cols="12">
                            <v-menu
                              ref="newMenu"
                              v-model="questMenu1[item1.titleId]"  //questMenu1为数组
                              :close-on-content-click="false"
                              transition="scale-transition"
                              offset-y
                              min-width="auto"
                              attach="#dateAllOne" //滚动滚动条，让组件框跟随页面一起移动
                            >
                              <template v-slot:activator="{ on, attrs }">
                                <v-text-field
                                  v-model.trim="item1.answerContent"
                                  label=""
                                  prepend-inner-icon="mdi-calendar-month-outline"
                                  readonly
                                  v-bind="attrs"
                                  v-on="on"
                                  dense
                                  outlined
                                  hide-details="auto"
                                ></v-text-field>
                              </template>
                              <v-date-picker
                                type="date"
                                no-title
                                v-model="item1.answerContent"
                                @input="questMenu1[item1.titleId] = false"
                              >
                              </v-date-picker>
                            </v-menu>
                          </v-col>
                        </v-row>
                      </div>

data: () => ({
questMenu1:[]
})

vuetify组件中表格页脚内容自定义

 

<v-data-table
          :headers="visitDataHead"  //表头
          :items="planDataList"   //表格内容
          :items-per-page="10"
          class="tableAllStyl"
          :options.sync="options"
          :server-items-length="total"
          :footer-props="{
            showFirstLastPage: true,
            firstIcon: 'mdi-arrow-collapse-left',
            lastIcon: 'mdi-arrow-collapse-right',
            prevIcon: 'mdi-minus',
            nextIcon: 'mdi-plus',
            'items-per-page-options': [10, 20, 50],
          }"  //页脚内容自定义
          @update:options="updateOptions"
          :loading="isData"
        >
          <template v-slot:[`item.detail`]="{ item }">  //自定义字段内容
            <div style="display: flex; align-items: center">
              <v-btn
                text
                style="padding: 0 4px; min-width: 0px"
                color="#0B41CD"
                @click="editChange(item)">
                查看
              </v-btn>
            </div>
          </template>
        </v-data-table>