ElementUI基本使用(一)

 

单选框

vue路由跳转：

日期做字段使用，指定format

下拉选择框

文件树状结构

自定义树状结构

删除数组对象中的一个元素splice

 

单选框

label值为string类型，后台传int需要处理

<el-form-item label="性别:" class="infoItem">
  <el-radio-group v-model="addData.gender">
    <el-radio label="0">男</el-radio>
    <el-radio label="1">女</el-radio>
  </el-radio-group>
</el-form-item>

 

vue路由跳转：

一种params，需改路由，一种query不需要改路由

<router-link :to="{name: 'vipCenter-customerDetails',params:{customerId:scope.row.id}}"  style="color: #3BE2F3 ">
    {{ scope.row.trueName }}
</router-link>

this.$router.push({name:'vipCenter-customerDetails', query:{customerId}})
this.$router.push({name:'vipCenter-customerDetails', params:{cutomerId}})

 

日期做字段使用，指定format

 

<el-form-item label="出生日期:" class="infoItem">
  <el-date-picker v-model="addData.birthday" value-format="yyyy-MM-dd HH:mm:ss" type="date" :picker-options="pickerOptions" placeholder="出生日期"></el-date-picker>
</el-form-item>

 

下拉选择框

velue是值，label是展示的什么

<el-form-item label="主诊医师:" class="infoItem">
  <el-select v-model="addData.chiefPhysicianId" filterable placeholder="请选择主诊医师" style="width: 100%;">
    <el-option v-for="item in chiefPhysicians" :key="item.id" :value="item.id"
               :label="item.value || item.name"></el-option>
  </el-select>
</el-form-item>

 

文件树状结构

需要转换成Tree对象，而不是一般数的数组

 

 <template>
    <div>
        <button @click="addNode">Add Node</button>
        <vue-tree-list
          @click="onClick"
          @change-name="onChangeName"
          @delete-node="onDel"
          @add-node="onAddNode"
          :model="data"
          default-tree-node-name="new node"
          default-leaf-node-name="new leaf"
          v-bind:default-expanded="false">
          <span class="icon" slot="addTreeNode">addTreeNode</span>
          <span class="icon" slot="addLeafNode">addLeafNode</span>
          <span class="icon" slot="editNode">editNode</span>
          <span class="icon" slot="delNode">delNode</span>
        </vue-tree-list>
        <button @click="getNewTree">Get new tree</button>
        <pre>
          {{newTree}}
        </pre>
    </div>
</template>
<script>
  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
  export default {
    components: {
      VueTreeList
    },
    data () {
      return {
        newTree: {},
        data: new Tree([
          {
            name: 'Node 1',
            id: 1,
            pid: 0,
            dragDisabled: true,
            addTreeNodeDisabled: true,
            addLeafNodeDisabled: true,
            editNodeDisabled: true,
            delNodeDisabled: true,
            children: [
              {
                name: 'Node 1-2',
                id: 2,
                isLeaf: true,
                pid: 1
              }
            ]
          },
          {
            name: 'Node 2',
            id: 3,
            pid: 0,
            disabled: true
          },
          {
            name: 'Node 3',
            id: 4,
            pid: 0
          }
        ])
      }
    },
    methods: {
      onDel (node) {
        console.log(node)
        node.remove()
      },
 
      onChangeName (params) {
        console.log(params)
      },
 
      onAddNode (params) {
        console.log(params)
      },
 
      onClick (params) {
        console.log(params)
      },
 
      addNode () {
        var node = new TreeNode({ name: 'new node', isLeaf: false })
        if (!this.data.children) this.data.children = []
        this.data.addChildren(node)
      },
 
      getNewTree () {
        var vm = this
        function _dfs (oldNode) {
          var newNode = {}
 
          for (var k in oldNode) {
            if (k !== 'children' && k !== 'parent') {
              newNode[k] = oldNode[k]
            }
          }
 
          if (oldNode.children && oldNode.children.length > 0) {
            newNode.children = []
            for (var i = 0, len = oldNode.children.length; i < len; i++) {
              newNode.children.push(_dfs(oldNode.children[i]))
            }
          }
          return newNode
        }
 
        vm.newTree = _dfs(vm.data)
      },
 
      onClick(model) {
        console.log(model)
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .vtl {
    .vtl-drag-disabled {
      background-color: #d0cfcf;
      &:hover {
        background-color: #d0cfcf;
      }
    }
    .vtl-disabled {
      background-color: #d0cfcf;
    }
  }
</style>
 
<style lang="less" rel="stylesheet/less" scoped>
  .icon {
    &:hover {
      cursor: pointer;
    }
  }
</style>

自定义树状结构

根据el自定义

 

  <el-tree
    :data="data"
    :props="defaultProps"
    node-key="id"
    default-expand-all
    :expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
  <span>{{ node.label }}</span>
  <span>
    <el-button
      icon="el-icon-edit"
      type="text"
      @click="() => append(data)">
     </el-button>
    <el-button
      type="text"
      icon="el-icon-delete"
      @click="() => remove(node, data)">
    </el-button>
  </span>
</span>
  </el-tree>
  
  append (data) {
  // const newChild = {id: id++, label: 'testtest', children: []}
  // if (!data.children) {
  //   this.$set(data, 'children', [])
  // }
  // data.children.push(newChild)
  this.departmentDialog = true
  this.departmentForm = data
},
remove (node, data) {
  const parent = node.parent
  const children = parent.data.children || parent.data
  const index = children.findIndex(d => d.id === data.id)
  children.splice(index, 1)
  let deleteInfo = {
    deptId: data.id
  }
  systemApi.deleteDept(deleteInfo).then(res => {
    if (res.data.code === 200) {
      this.$message.ok(res.data.msg)
    } else {
      this.$message.error(res.data.msg)
    }
  })
}

 

删除数组对象中的一个元素splice

for (let j = 0; j < this.roleInfo.users.length; j++) {
  if (id === this.roleInfo.users[j].id) {
    this.roleInfo.users.splice(j, 1)
  }
}