循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

treedata: [ // 初始化树列表
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1' }]
        }]

界面代码如下所示
<el-tree
  style="padding-top:10px"
  :data="treedata"
  node-key="id"
  default-expand-all
  highlight-current
  show-checkbox
  :default-checked-keys="['1-1-1']"
  @node-click="handleNodeClick"
  @check-change="handleCheckChange"
>
  <span slot-scope="{ node, data }" class="custom-tree-node">
    <span>
      <i :class="node.icon ? node.icon : 'el-icon-price-tag'" />
      {{ node.label }}
   &nbsp;&nbsp;
    </span>
  </span>
</el-tree>

var data = [
   {"id":1,"parent":0,"addr":"重庆"},
   {"id":11,"parent":1,"addr":"重庆"},
   {"id":12,"parent":1,"addr":"重庆"},
   {"id":121,"parent":12,"addr":"重庆"},
   {"id":2,"parent":0,"addr":"重庆"},
   {"id":21,"parent":2,"addr":"重庆"},
   {"id":211,"parent":21,"addr":"重庆"},
   {"id":3,"parent":0,"addr":"重庆"},
   {"id":4,"parent":0,"addr":"重庆"},
   {"id":31,"parent":3,"addr":"重庆"},
   {"id":32,"parent":3,"addr":"重庆"}
];

//二维列表转树形控件所需嵌套数据格式
export function getJsonTree(data, config) {
  const id = config.id || 'id'; const pid = config.pid || 'pid';
  const children = config.children || 'children';
  const label = config.label || 'name';// 默认label为name字段
  const idMap = []; const jsonTree = [];
  data.forEach(function(v) {
    idMap[v[id]] = v;
  });
  data.forEach(function(v) {
    const parent = idMap[v[pid]];
    if (parent) {
      !parent[children] && (parent[children] = []);
      parent[children].push(v);
    } else {
      jsonTree.push(v);
    }
  });
  // treeAddIcon(jsonTree, label);// 循环遍历给tree加图标
  return jsonTree;
}

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

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

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

<!--功能操作按钮 -->
    <el-row style="float:right;padding-bottom:10px">
      <el-button-group>
        <el-button icon="el-icon-search" type="primary" size="mini" round @click="search()">查询</el-button>
        <el-button icon="el-icon-refresh-left" type="warning" size="mini" round plain @click="resetSeachForm('searchForm')">重置</el-button>
      </el-button-group>
      <el-button-group>
        <el-button icon="el-icon-plus" type="success" size="mini" round @click="showAdd()">添加</el-button>
        <el-button icon="el-icon-document-remove" type="danger" size="mini" round :disabled="listSelection.length === 0" @click="batchDelete()">批量删除</el-button>
      </el-button-group>
      <el-button-group>
        <el-button icon="el-icon-upload2" type="warning" size="mini" round @click="showImport()">导入</el-button>
        <el-button icon="el-icon-download" :loading="downloadLoading" type="primary" size="mini" round @click="handleDownload()">导出</el-button>
      </el-button-group>
    </el-row>

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<el-table-column align="center" label="标签" width="100">
        <template slot-scope="scope">
          <el-tag
            v-for="tag in scope.row.tags.split(',')"
            :key="tag"
            type="primary"
          >
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>

<el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="(scope.row.state === 0) ? 'success' : 'danger'" effect="dark">
            {{ scope.row.state | stateFilter }}</el-tag>
        </template>
      </el-table-column>

<el-table-column align="center" label="创建时间" width="160" prop="creationTime" :formatter="timeFormat" />

<!--表格行操作按钮 -->
      <el-table-column align="center" label="操作" width="110">
        <template scope="scope">
          <el-row>
            <el-button-group>
              <el-tooltip effect="light" content="查看" placement="top-start">
                <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" />
              </el-tooltip>
              <el-tooltip effect="light" content="编辑" placement="top-start">
                <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" />
              </el-tooltip>
              <el-tooltip effect="light" content="删除" placement="top-start">
                <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" />
              </el-tooltip>
            </el-button-group>
          </el-row>
        </template>
      </el-table-column>

<el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status==0 ? 'success' : 'warning'" effect="dark">
                {{ scope.row.status==0 ? '正常' : '停用' }}
              </el-tag>
              <el-switch
                v-model="scope.row.status"
                :active-value="0"
                :inactive-value="1"
                @change="changeStatus(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>

handleDownload() { // 导出Excel文件
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['父ID', '分类编码', '分类名称', '分类描述', '分类图片封面', '分类图标', '排序', '状态']
        const filterVal = ['pid', 'categoryCode', 'categoryName', 'note', 'pictureUrl', 'icon', 'sortCode', 'status']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '商品分类',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'creationTime') {
          return this.parseTime(v[j], '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          return v[j]
        }
      }))
    },

<treeselect v-model="value" :multiple="true" :options="options" />

<treeselect
  v-model="value"
  :options="treedata"
  :multiple="true"
  :flat="true"
  :default-expand-level="Infinity"
  :open-on-click="true"
  :open-on-focus="true"
  clearable
  :max-height="200"
/>

options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          } ],

<el-col :span="24">
    <el-form-item label="父项名称" prop="pid">
      <MyTreeselectTop v-model="addForm.pid" :options="treedata" />
    </el-form-item>
  </el-col>

npm install @chenfengyuan/vue-barcode vue

npm install @chenfengyuan/vue-qrcode vue

// 引入barcode,qrcode
import VueBarcode from '@chenfengyuan/vue-barcode';
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueBarcode.name, VueBarcode);

npm install echarts vue-echarts

import ECharts from 'vue-echarts' // 主图表对象
import 'echarts/lib/chart/line' // 曲线图表
import 'echarts/lib/chart/bar' // 柱状图
import 'echarts/lib/chart/pie' // 饼状图
import 'echarts/lib/component/tooltip' // 提示信息

<v-chart
  ref="simplebar"
  :options="simplebar"
  autoresize
/>

data() {
    return {
      simplebar: {
        title: { text: '柱形图Demo' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    }
  }