循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
  <el-option
    v-for="(item, key) in typeList"
    :key="key"
    :label="item.value"
    :value="item.key"
  />
</el-select>

<my-dictdata v-model="searchForm.ProductType" type-name="商品类型" />

import myDictdata from '@/components/Common/my-dictdata'
export default {
  components: { myDictdata },

<template>
  <el-select v-model="svalue" filterable clearable placeholder="请选择">
    <el-option
      v-for="(item, index) in dictItems"
      :key="index"
      :label="item.Text"
      :value="item.Value"
    >
      <span style="float: left;color:yello;">
        <i class="el-icon-tickets" style="color:blue;" />
        {{ item.Text }}
      </span>
    </el-option>
  </el-select>
</template>

<myTree :data="treedata" icon-class="el-icon-price-tag" @nodeClick="nodeClick" />

getTree() { // 树列表数据获取
      var param = {
        SkipCount: 0,
        MaxResultCount: 1000,
        Tag: 'web' // Web端专用
      }
      menu.GetAll(param).then(data => {
        this.treedata = [];// 树列表清空
        var list = data.result.items
        if (list) {
          // 使用getJsonTree函数，实现对二维表转换为嵌套树对象集合
          var newTreedata = getJsonTree(list, {
            id: 'id',
            pid: 'pid',
            children: 'children',
            label: 'name'
          });
          this.treedata = newTreedata
        }
      });
    },

<el-dialog title="查看信息" :visible="isView" :modal-append-to-body="false" @close="closeDialog">
  <el-col>
    <el-tabs value="basicPage" type="border-card">
      <el-tab-pane name="basicPage" label="基本信息">
        <el-form ref="viewForm" :model="viewForm" label-width="120px">
          <el-form-item label="角色名">
            <el-input v-model="viewForm.name" disabled />
          </el-form-item>
          <el-form-item label="角色显示名">
            <el-input v-model="viewForm.displayName" disabled />
          </el-form-item>
          <el-form-item label="角色描述">
            <el-input v-model="viewForm.description" type="textarea" disabled />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="permitPage" label="权限">
        <rolefunction ref="rolefunction" :role-id="selectRoleId" />
      </el-tab-pane>
      <el-tab-pane name="userPage" label="用户">
        <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
      </el-tab-pane>
      <el-tab-pane name="menuPage" label="菜单">
        <rolemenu ref="rolemenu" :role-id="selectRoleId" />
      </el-tab-pane>
    </el-tabs>
  </el-col>
  <div slot="footer" class="dialog-footer">
    <el-button type="success" @click="closeDialog">关闭</el-button>
  </div>
</el-dialog>