封装TreeGrid组件

2019-11-13 admin

封装TreeGrid组件

<template>
  <el-table
    :data="data"
    border
    :row-style="showRow">
    <el-table-column v-for="(column, index) in columns" :width="column.width" :key="column.dataIndex"
      :label="column.text">
      <template slot-scope="scope">
        <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space" :key="levelIndex"></span>
        <el-button type="success" plain size="mini" round v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-plus" aria-hidden="true"></i>
          <i v-if="scope.row._expanded" class="el-icon-minus" aria-hidden="true"></i>
        </el-button>
        <el-button size="mini" disabled round v-else-if="index===0">
          <i class="el-icon-minus"></i>
        </el-button>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        {{scope.row[column.dataIndex]}}
      </template>
    </el-table-column>
    <el-table-column label="操作" v-if="controls" width="160">
      <template slot-scope="scope">
        <el-button plain title='修改商品分类'  type="primary" size="small" @click="getCateInfoById(scope.row)" icon="el-icon-edit"></el-button>
        <el-button plain title='删除商品分类'  type="danger" size="small" @click="deleteCategory(scope.row)" icon="el-icon-delete"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'tree-grid',
  props: {
    treeStructure: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 数据源
    dataSource: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 是否展示操作列
    controls: {
      type: Boolean,
      default: true
    },
    // 是否默认展开所有树
    defaultExpandAll: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  computed: {
    // 格式化数据源
    data: function () {
      let me = this
      if (me.treeStructure) {
        let data = this.handleData(me.dataSource, null, null, me.defaultExpandAll)
        return data
      }
      return me.dataSource
    }
  },
  methods: {
    // 数据转换
    handleData: function (data, parent, level, expandedAll) {
      let _this = this
      let tmp = []
      Array.from(data).forEach(function (record) {
        if (record._expanded === undefined) {
          _this.$set(record, '_expanded', expandedAll)
        }
        if (parent) {
          _this.$set(record, '_parent', parent)
        }
        let _level = 0
        if (level !== undefined && level !== null) {
          _level = level + 1
        }
        _this.$set(record, '_level', _level)
        tmp.push(record)
        if (record.children && record.children.length > 0) {
          let children = _this.handleData(record.children, record, _level, expandedAll)
          tmp = tmp.concat(children)
        }
      })
      return tmp
    },
    // 显示行
    showRow: function ({row, rowIndex}) {
      let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)
      row._show = show
      return show ? '' : 'display:none;'
    },
    // 展开下级
    toggle: function (trIndex) {
      let me = this
      let record = me.data[trIndex]
      record._expanded = !record._expanded
    },
    // 显示层级关系的空格和图标
    spaceIconShow (index) {
      let me = this
      if (me.treeStructure && index === 0) {
        return true
      }
      return false
    },
    // 点击展开和关闭的时候,切换图标
    toggleIconShow (index, record) {
      let me = this
      if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
        return true
      }
      return false
    },
    getCateInfoById (row) {
      // 根据ID查询分类信息
      this.$emit('editCate', row.cat_id)
    },
    deleteCategory (row) {
      // 删除分类
      this.$emit('deleteCate', row.cat_id)
    }
  }
}
</script>
<style scoped>
  .ms-tree-space{
    display: inline-block;
    width: 28px;
  }
  .el-button--mini, .el-button--mini.is-round {
    padding: 7px;
  }
</style>

READEME

# TreeGrid组件使用说明

## Attributes

| 参数          | 说明           | 类型    | 可选值               | 默认值 |
| ------------- | -------------- | ------- | -------------------- | ------ |
| treeStructure | 是否树形结构   | Boolean | -                    | false  |
| columns       | 列的属性       | Array   | text/dataIndex/width | -      |
| dataSource    | 数据源         | Array   | -                    | []     |
| controls      | 是否显示操作列 | Boolean | -                    | true   |

## Events

| 事件名称 | 说明         | 回调参数   |
| -------- | ------------ | ---------- |
| deleteCate   | 删除商品分类 | 商品分类id |
| editCate     | 编辑商品分类 | 商品分类id |

## 示例

<tree-grid
  :treeStructure="true"
  :columns="columns"
  :data-source="dataSource"
  @deleteCate="deleteCategory"
  @editCate="editCategory"
>
</tree-grid>

data () { return {

dataSource: [],
columns: [{
  text: '分类名称',
  dataIndex: 'cat_name',
  width: ''
}, {
  text: '是否有效',
  dataIndex: 'cat_deleted',
  width: ''
}, {
  text: '排序',
  dataIndex: 'cat_level',
  width: ''
}]

} }, methods: { deleteCategory (cid) {

console.log(cid)

}, editCategory (cid) {

console.log(cid)

} }

[转载]原文链接:https://segmentfault.com/a/1190000020983551

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79068.html

文章标题:封装TreeGrid组件

相关文章
Vue Anchor(锚点)组件 导航锚点
Vue Anchor(锚点)组件 导航锚点 iview 3.x框架中新添了一个Anchor(锚点组件),用这个组件去做页面的分类导航正好合适,但是苦于官方文档太过抽象研究了一整天,才勉强可以在项目中应用。下面是我研究后的一点总结: ...
2018-10-15
angular2倒计时组件使用详解
项目中遇到倒计时需求,考虑到以后在其他模块也会用到,就自己封装了一个组件。便于以后复用。 组件需求如下: 接收父级组件传递截止日期 接收父级组件传递标题 组件效果 变量 组件countdown.html代码 &lt;div clas...
2017-03-11
适用于 Vue 2.0 的功能强大的 Contextmenu 组件
适用于 Vue 2.0 的 ContextMenu 组件。 中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu 概览 访问在线示例 或 查看在线示例 GIF...
2017-12-24
简化版手机端照片预览组件
可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。它的github地址是:https://gith...
2017-03-22
最好用的Bootstrap fileinput.js文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。 一、demo 二、插件引入 &lt;link type=“text/css” rel=“s...
2017-03-21
Javascript 详解封装from表单数据为json串进行ajax提交
摘要: js封装from表单数据为json串进行ajax提交 json封装代码 function getFormJson(frm) { &#x2F;&#x2F;frm:form表单的id var o = {}; var a...
2017-04-01
angularjs使用directive实现分页组件的示例
闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,bootstrap html: &lt;ul class=&quot;page clearf...
2017-03-20
BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;link type=&quot;text&#x2F;css&quot; rel=&quot...
2017-03-16
VUE开发一个图片轮播的组件示例代码
本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考。希望此文章对各位有所帮助。 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: &lt;template&gt; ...
2017-03-14
javascript封装的sqlite操作类实例
本文实例讲述了javascript封装的sqlite操作类。分享给大家供大家参考。具体如下: function sql(name,v,desc,size,tables){ this.db=null; this.name=name; t...
2017-03-27
回到顶部