vue:使用技巧汇总篇

初级级提升篇

form表单label字体对齐方式::label-position=”labelPosition”(属性值:top,left,right)

<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">

2018-8-20 18:43:03
dayjs 的使用技巧
import dayjs from ‘dayjs’,
获取时间戳
dayjs().valueOf()

2018-8-15 10:48:18
汉字换行
white-space:pre-wrap
英文换行
word-break:break-all;
element -ui的弹窗的按钮样式(需要调整为确定在左边,取消在右边)customClass: ‘confirm-box’,

apiListAffixDel({id:id},res=>{
        this.$confirm('确定删除吗?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          customClass: 'confirm-box',
          type: 'warning'
        }).then(() => {
          apiListRowDel({id:id},res=>{
            console.log(res);
            this.msg(res.data.data,'success')
            this.getListEvent();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })

2018-8-13 15:49:08

表格自定义验证时的规则写法

el-form 绑定的:model=”config”
el-form-item 的prop 则使用的是showAddCreditLog.eventDate
元素使用的则是v-model=”config.showAddCreditLog.eventDate”
最终的使用结构是

<el-form label-width="1.5rem" label-position="right" :model="config" :rules="creditRules" ref="addCreditLogformRule">
        <el-form-item label="发生时间" class="editWidth" prop = "showAddCreditLog.eventDate">
          <el-date-picker value-format="timestamp" v-model="config.showAddCreditLog.eventDate" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
</el-form>

规则验证


creditRules: {
        'showAddCreditLog.eventDate': {
          required: true,
          message: "请选择时间",
          trigger: "blur"
        },
}

2018-7-31 18:36:15

表格的hover事件
在td上添加options的class-name名

<el-table-column label="" width="100" class-name="options">
 <template slot-scope="scoped">
   <i class="iconfont icon-edit"></i>
   <i class="iconfont icon-del"></i>
 </template>
</el-table-column>

2018-7-26 19:00:03
element-ui 中表格里的时间戳格式化
:formmatter=”formatDate”

 <el-table-column prop="creatDate" label="申请日期" align="center" :formatter="formatDate"></el-table-column>

//时间格式化
    formatDate(row, column, cellValue){
      if(cellValue){
        return dayjs(cellValue).format('YYYY-MM-DD')
      }
      return ""
    },

2018-7-17 18:37:13
element-ui 的table表格文字超出要以…显示鼠标放上去要显示全部
在表格中追加show-overflow-tooltip

<el-table-column prop="detlAddrDesc" label="地址" show-overflow-tooltip></el-table-column>

这里写图片描述

2018-7-13 17:57:53
element-ui的上传图片添加token

<el-upload class="avatar-uploader" :headers="headers" action="http://xx.xx.xx.xx:xxx/BASE-API/fileUpload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

export default {
  data() {
    return {
      headers:{token: getToken()},
      }
  }
}

2018-7-12 10:57:37
根据数量变换选中状态

<el-button :class="[item.ctrlNum1?'selected':'noSelected','button-'+item.entryCode]"  @click="chooseStoreSttus(index)" v-for="(item,index) in form.storeSttusCodes" :key="item.entryCode">{{item.entryDesc}}</el-button>

chooseStoreSttus(index) {
      for (var stt in this.form.storeSttusCodes) {
        this.form.storeSttusCodes[stt].ctrlNum1 = 0;
      }
      this.form.storeSttusCodes[index].ctrlNum1 = 1;
    }

v-for 和v-if同时使用

<el-button :class="item.ctrlNum1?'selected':'noSelected'" @click="checkDtoreToolsData1701(index)" v-for="(item,index) in form.storeTools" v-show="index!=2" :key="item.entryCode">{{item.entryDesc}}</el-button>

思路:v-show是做显示和隐藏判断的,如果条件为true则控制显示,如果为false则隐藏.避免了去写JS

动态切换颜色
根据数量来确定是不是要选中;如果大于0则选中,如果等于0则不选中

:class="equip.ctrlNum1?'selected':'noSelected'"

详解2

<div class="overflow border-bottom">
                <span class="fl">其他仪器</span>
                <span class="fr c cursor" @click="sildeUpStoreEqui">收起</span>
              </div>

<div class="overflow mt-d1" :class="midMachine.sildeUpStoreEquiClass?'sildeUpStoreEquiShow':''">
                <div class="fl">
                  <el-input class="w-1d8" v-model="midMachine.entryDesc" placeholder="仪器名称">
                  </el-input>
                  <el-select class="w-d9" v-model="midMachine.ctrlNum1" @change="checkequipNum" placeholder="请选择">
                    <el-option v-for="item in Machine_num" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>

                </div>
                <div class=" fr c cursor " @click="addMachine">
                  <i class="icon-add iconfont mr-10"></i>增加仪器
                </div>

              </div>

export default {
  data() {
    return {
      midMachine: {
        entryDesc: "",
        ctrlNum1: "",
        sildeUpStoreEquiClass: false
      }
   }
},
    methods:{
     //收起仪器新加区域
        sildeUpStoreEqui() {
          this.midMachine.sildeUpStoreEquiClass
            ? (this.midMachine.sildeUpStoreEquiClass = false)
            : (this.midMachine.sildeUpStoreEquiClass = true);
        }
    }
}

切换按钮的颜色

v-bind:class="{xx:shopType.selected,dashed:!shopType.selected}"

<el-form-item label="门店经营类别" class="text-l">
    <el-button v-for="(shopType,index) in ruleForm.busCategCodes" :key="shopType.value" @click="checkShopType(index,shopType.selected,shopType.lable)" v-bind:class="{xx:shopType.selected,dashed:!shopType.selected}">{{shopType.lable}}</el-button>
</el-form-item>

//经营类别列表
        busCategCodes: [
          { lable: "类别1", value: "类别1", selected: 1 },
          { lable: "类别21", value: "类别21", selected: 1 },
          { lable: "类别22", value: "类别22", selected: 1 },
          { lable: "类别23", value: "类别23", selected: 1 },
          { lable: "类别24", value: "类别24", selected: 1 },
          { lable: "类别25", value: "类别25", selected: 1 },
          { lable: "类别26", value: "类别26", selected: 1 },
          { lable: "类别37", value: "类别37", selected: 0 }
        ],

 checkShopType(index, selected) {
      if (selected == 0) {
        this.ruleForm.busCategCodes[index].selected = 1;
      } else {
        this.ruleForm.busCategCodes[index].selected = 0;
      }
    },

从而实现class的点击切换

vue:使用技巧汇总篇

猜你喜欢