vue:使用技巧汇总篇

• 初级级提升篇

el-table相关

---

2018-9-3 15:09:20
element-ui 改变行的颜色

methods

rowStyle({ row, rowIndex }) {
      // if (rowIndex === 0) {
      return "background-color:green";
      // } else {
      // return ''
      // }
    },

表格样式

<el-table :data="props.row.orderLineList" :show-header="false" class="table-wapper" :row-style="rowStyle">

---

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>

css样式

td.options {
  color: $font-active;
  padding: 0 !important;
  .cell {
    padding-left: 0;
    padding-right: 0;
  }
  .iconfont {
    margin: 0 .04rem;
    display: none;
    cursor: pointer;
  }
}

.el-table--enable-row-hover .el-table__body tr:hover>td.options {
  .iconfont {
    display: inline-block;
  }
}

---

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的点击切换