Element-UI日常使用

el-tree

修改不同层级的样式

<template> 
	<el-tree
          ref="tree"
          :data="wadingSourceListData"
          :default-expanded-keys="[3, 14]"
          :default-checked-keys="[50]"
          @check="handleCheck"
          :props="defaultProps"
          node-key="erlId"
          show-checkbox
        >
          <template  slot-scope="{ node, data }">
            <div class="custom-node">
              <i :class="data.icon" v-if="data.icon" />
              <span :class="setNodeStyle(node.level)">{{ data.erlName }}</span>
            </div>
          </template>
    </el-tree>
</template>
<script>
    export default {
        methods: {
            /**
            * @description 修改不同nodelevel得样式
            * @param       {String} nodeLevel node级别
            * @return      {String} nodeStyle 对应的className
            */
            setNodeStyle(nodeLevel){

                const style = [ 
                    [(nodeLevel)=>nodeLevel==1,'nodeLevel1'],
                    [(nodeLevel)=>nodeLevel==2,'nodeLevel2'],
                    [(nodeLevel)=>nodeLevel==3,'nodeLevel3'],
                ]

                let nodeStyle = style.find(item=>item[0](nodeLevel))

                return nodeStyle[1] ? nodeStyle[1] : ''
            }
        }
    }
</script>
<style lang="scss" scoped>
    .nodeLevel1{
      font-size: 20px !important;
    }
    .nodeLevel2{
      font-size: 16px !important;
    }
    .nodeLevel3{
      font-size: 14px !important;
    }
</style>

el-input

插入自定义图片

<!-- 1.前面插入 #prefix   2.后面插入#suffix -->
<el-input style="width: 335px;height: 32px;" v-model="position" placeholder="选择点位">
    <template #suffix>
    	<img style="margin: 50% 0px;box-sizing: border-box;" src="../img/x.png" @click="removeSgd()">
    </template>
</el-input>

el-input < type=“textarea”>

<el-row>
    <el-form-item label="备注">
        <el-col :span="24">
            <el-input class="textarea" type="textarea" show-word-limit maxlength="500"
            	placeholder="请输入内容" v-model="sizeForm.t">
            </el-input>
        </el-col>
    </el-form-item>
</el-row>
<style lang="less" scoped>
 // 修改输入样式
::v-deep .el-textarea__inner {
    background-color: #292929;
    color: #FFFF;

}
// 修改输入框最大最小
::v-deep .el-textarea .el-textarea__inner {
    max-height: 300px;
    min-height: 180px;
    padding:5px 8px;
}
// 修改滚动条整体样式
::v-deep .el-textarea ::-webkit-scrollbar {
    width: 6px;
    background: rgba(245, 244, 244,  0.164);
}
//修改滚动条里面的滑块
::v-deep .el-textarea ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #5e67e0;
}
//修改滚动条里面轨道
::v-deep .el-textarea ::-webkit-scrollbar-track {
    background-color: transparent;
}
// 修改右小角得文字提示样式
::v-deep .textarea  .el-input__count {
    background-color: transparent;
}
</style>

el-form

vue中循环生成表单

<template>
    <el-form :inline="true" :model="numberValidateForm" ref="accidentSimulationStartForm" class="demo-ruleForm">
        <el-form-item v-for="(domain, index) in numberValidateForm.domains" :key="domain.unit"
                      :prop="'domains.' + index + '.value'" :rules="rules[domain.name]" class="form-input">
            <el-input style="width: 90px;height: 32px;" v-model.number="domain.value" :placeholder="domain.label">
                <template #suffix>
                    <img style="margin: 50% 0px;box-sizing: border-box;" src="../img/x.png" @click="clearFormItem(index)">
                </template>
            </el-input>
            <span class="domain-unit">{{ domain.unit }}</span>
        </el-form-item>
    </el-form>
</template>
<script>
  export default {
    data() {
      return {
        numberValidateForm: {
          domains: [{
              label: '风速',
              value: 1,
              unit: 'm/s',
              name: 'windSpeed'
            },
            {
              label: '风向',
              value: 45,
              unit: '向',
              name: 'windDirection'
            },
            {
              label: '模拟倍速',
              value: 10,
              unit: 'x',
              name: 'playSpeed'
            },
          ]
        },

        rules: {
          windSpeed: [{
              required: true,
              message: '风速不能为空'
            },
            {
              type: 'number',
              message: '风速必须为数字值'
            }
          ],
          windDirection: [{
              required: true,
              message: '风向不能为空'
            },
            {
              type: 'number',
              message: '风向必须为数字值'
            }
          ],
          playSpeed: [{
              required: true,
              message: '模拟倍速不能为空'
            },
            {
              type: 'number',
              message: '模拟倍速必须为数字值'
            }
          ],
        },
      }
    },
    methods: {
      clearFormItem(index) {
        this.numberValidateForm.domains[index].value = null
      },
      submit() {
        this.$refs['accidentSimulationStartForm'].validate((valid) => {
          if (valid) {
            alert('验证通过')
          } else {
            this.$message({
              message: '有未填信息',
              type: 'warning'
            });
            return false;
          }
        });
      }
    },
  }
</script>

el-menu

动态生成菜单

// 父组件
<template  >
  <div>
    <el-menu
      @select="selectMenu"
      :default-active="currentIndexLight"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <navigation-item v-for="(menu, i) in adminMenus" :key="i" :item="menu" />
    </el-menu>
  </div>
</template>
<script>
import NavigationItem from "@/components/navMenu.vue";
export default {
  data() {
    return {
      startRouter: true, //开启路由标识， ，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
      currentIndexLight: "", //当前激活菜单的 index  高亮显示
      arrIndex: [],
      adminMenus: [],
    };
  },  components: {
    NavigationItem,
  },
  created() {
  },
  methods: {
    selectMenu(key, keyPath) {
      console.log(key, keyPath);
      this.currentIndexLight = key;
    },
    // 展开指定的 sub-menu
    handleOpen(key, keyPath) {
      console.log("展开的时候触发", key, keyPath);
    },
    // 收起指定的 sub-menu
    handleClose(key, keyPath) {
      console.log("收起的时候触发", key, keyPath);
    },
  },
};
</script>
<style lang='less'  scoped>
/* 侧边栏部分 */
.el-aside {
  width: 240px;
  color: #9fafc3;
  text-align: center;
  line-height: 200px;
  background-color: #2b333d;
  z-index: 999;
}
/deep/ .el-submenu__title {
  text-align: left;
}
/deep/ .el-menu-item {
  text-align: left;
  text-indent: 20px;
}
.el-aside .el-menu {
  width: 240px;
  overflow: hidden;
}
.el-menu {
  border: 0;
  z-index: 99;
}
</style>

// 子组件
<template>
  <div class="navMenu">
    <template v-if="item.children && item.children.length === 0">
      <el-menu-item :key="item.id" :index="item.path"  @click="goTo(item)">
        {{ item.name }}
      </el-menu-item>
    </template>
    <!--父级菜单-->
    <el-submenu v-else :index="item.path">
      <span slot="title">
        {{ item.name }}
      </span>
      <template v-for="child in item.children">
        <navigation-item
          v-if="child.children && child.children.length > 0"
          :key="child.id"
          :item="child"
        />
        <el-menu-item v-else :key="child.id" :index="child.path"  @click="goTo(child)">
          {{ child.name }}
        </el-menu-item>
      </template>
    </el-submenu>
  </div>
</template>
<script>
export default {
  name: "NavigationItem", //使用递归组件必须要有
  props: ["item"], // 传入子组件的数据
  data() {
    return {};
  },
  methods: {
     goTo(item) {
     if(this.$route.path ==  item.path) return
      this.$router.push({
        path: item.path,
        replace: true,
        query: {
        },
      });
    },
  },
};
</script>

DateTimePicker（el-puls）

<template>
<el-date-picker
     @change ="pickerChange"
     class="picker"
     v-model="value1"
     :disabled-date="disabledDate"
     :disabled-hours="disabledHours" 
     :disabled-minutes="disabledMinutes" 
     :disabled-seconds="disabledSeconds"
     type="datetime"
     format = "YYYY:MM:DD HH:mm:ss"
     placeholder="选择日期时间"
/>
</template>
<script>
export default {
 data() {
    return {
    	value1:""
    };
  },
  methods:{
    //使用disabled-date来判断可选范围，使用函数来返回Boolean进行判断
    //这里限制不能选择未来时间，即不可以超过当前时间选择
    disabledDate(date){ // 限制不可超过当前年月日
      let currentTime = new Date()
      return date.getTime() > currentTime.getTime()
    },
    disabledHours () { // 限制不可超过当前小时
        const a = [];
        for (let i = 0; i < 24; i++) {
            // 限制之前 < 之后 > ，下面同理
            if (new Date().getHours() >= i) continue;
            a.push(i);
        }
        return a;
    },
    disabledMinutes ()  { // 限制不可超过当前分钟
        const a = [];
        for (let i = 0; i < 60; i++) {
        // 限制之前 < 之后 > ，下面同理
        if (new Date().getMinutes() >= i) continue;
          a.push(i);
        }
        return a;
    },
    disabledSeconds () { // 限制不可超过当前秒
        const a = [];
        for (let i = 0; i < 60; i++) {
            // 限制之前 < 之后 > ，下面同理
            if (new Date().getSeconds() >= i) continue;
            a.push(i);
        }
        return a;
    },
  }
}     
</script>