Vue学习记录

Vue 使用记录

Vue 的编写函数及自带的函数使用

操作子表格展开和折叠

<template>
    <el-table
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        ref="multipleTable"
        @expand-change="expandSelect"
    >
        <el-table-column
        label="操作"
        min-width="8%"
        align="center">
        <template slot-scope="scope" style="text-align: center">
          <el-button type="text" size="small" @click="moveUp(scope.$index,scope.row)">上移</el-button>
          <el-button type="text" size="small" @click="moveDown(scope.$index,scope.row)">下移</el-button>
          <el-button type="text" size="small" @click="addCondition(scope.$index,scope.row),
                                                      expandSelect2(scope.row,1)">添加条件
          </el-button>
          <el-button size="small" @click="andOrChangeIn(scope.row)">{{ scope.row.andOrFlagIn === "and" ? '且' : '或' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>
    export default {
         data() {
            return {
              getRowKeys(row) {  return row.id },
              expands: [],
            }
         }
         methods: {
        	 // 点击展开标志，展开的关闭，关闭的展开
            expandSelect(row, expandedRows) {
              debugger
              for (let i = 0; i < this.expands.length; i++) {
                if(row.id ===this.expands[i] ){
                  this.expands.splice(i, 1)
                  // this.expands = []
                  return
                }
              }
              // this.expands = []
              row ? this.expands.push(row.id) : ''
            },
            // 点击添加条件展开条件表格
            expandSelect2(row, expandedRows) {
              debugger
              for (let i = 0; i < this.expands.length; i++) {
                if(row.id ===this.expands[i] ){
                  return
                }
              }
              row ? this.expands.push(row.id) : ''
            }
    	}
    }
</script>

Vue 数据操作

删除

<script>
    for (let i in this.list1) { //移除掉list1中的id
      if (this.list1[i] === data.id) {
        this.list1.splice(i, 1)
      }
    }
</script>

数组添加

push(值)

去除对象中的属性

this.$delete(对象,'属性名称')

判断对象中是否有该属性

if (this.attrTable.data[i].hasOwnProperty('children')) {//可以借用，判断子节点参考

数据刷新

this.attrTable.refresh()