js 高深用法

1.在对象数组中根据对象的key找到该对象：

找到如下rules数组中对象 id为2的name

rules:[
            {id:1, name:this.$t('steps_management.message.number')},
            {id:2, name:this.$t('steps_management.message.time')},
            {id:3, name:this.$t('steps_management.message.frequency')},
            {id:4, name:this.$t('steps_management.message.cycle')}
          ]

• 解决：

costRulesChangeme:function(id) {
        return this.rules.filter(item => item.id == id)[0].name
      }  

2.快速遍历数组

获取该数组下的id存入一个新数组

rules:[
            {id:1, name:this.$t('steps_management.message.number')},
            {id:2, name:this.$t('steps_management.message.time')},
            {id:3, name:this.$t('steps_management.message.frequency')},
            {id:4, name:this.$t('steps_management.message.cycle')}
          ]

• 解决

new = []
rules.forEach(item => {
        console.log(item)
        new.push(item.id)
      });

3.Vue动态样式

• 样式使用

        <li
              role="menuitem"
              id="cascader-menu-6225-0-0"
              tabindex="-1"
              :class="[negtive_class ,{'in-active-path':project_code_index==index }]"   #动态样式
              @click="onClickProjctCode(item, index)"
              v-for="(item,index) in options"
              :key="item"
            />

• js语句

export default {
  data() {
    return {
      project_code_index:1,
      negtive_class:'el-cascader-node',     #固定样式
    },
methods: {
    getData() {},
    onClickProjctCode(item, index) {
      this.project_code_index=index
      console.log(item, index);
    }
  }

• 样式

.el-cascader-node {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 30px 0 20px;
    height: 34px;
    line-height: 34px;
    outline: 0;
}
.el-cascader-node .is-active {
    color: #409EFF;
    font-weight: 700;
}

4.父组件传值给子组件

• 父组件

<template>
    <div class="steps-template">
      <stepsTemplate :templateTableData="templateTableData"></stepsTemplate>  
        <!--传值-->
    </div>
</template>

<script type="text/ecmascript-6">
import stepsTemplate from "./child/stepsTemplate.vue";
export default {
  components: {
    stepsTemplate: stepsTemplate      //声明子组件
  },
}
</script>

• 子组件

<template>
....
</template>

<script type="text/ecmascript-6">

export default {
   props: {
    templateTableData: Array    //接受父组件传来的值
  },
}
</script>

5.子组件调用父组件方法

• 子组件

deleteRow() {
      // 点击删除按钮删除
      this.$parent.deleteRow(select_ids); //调用父组件中方法
    }

• 父组件

deleteRow(select_ids) {
      // 子组件stepsTemplate调用父组件

    },