由于项目中要用到, 然而 element ui 又没有类似的组件, 所以只能自己想办法来实现表格树组件.
原理:
结合 el-tree 和 el-col , el-table , ele-button 实现的. 利用 el-tree 的 render-content 方法, 表格的 head 和 body 列用 el-col 模拟,:span 最大不超过 24 . 最后一列一般都是操作列, 我写死成了 循环 el-button , 其实说白了, 核心的还是 el-tree 组件在跑.
如何使用?
很简单 一句话,
<MyTableTree :mate="treeConfig"</MyTableTree>
所有的配置都在 自定义的 treeConfig 中
javascript 代码
- treeConfig: {
- // 等于 el-tree 的选项配置
- options: {
- 'show-checkbox': true
- },
- // 自定义表格列 目前支持文本渲染
- columns: [
- {
- label: '菜单编码',
- prop: 'funcCode',
- span: 5 // 列宽 小于 24
- }
- ],
- // 操作按钮列表
- actions: [
- {
- type: String // 同 el-button 的 type
- prop:function | String // 支持函数返回 html 和 文本字符串
- action: function // 按钮点击触发的函数 回调函数是该行的 row
- }
- ],
- //tree 的数据来源
- rows: []
- }
该组件最主要的方法就是自定义渲染 element tree 的 header 方法如下:
javascript 代码
- renderContent: function (h, node) {
- // 生成按钮
- let buttons = [];
- if (this.mate.actions) {
- for (let btn of this.mate.actions) {
- btn.text = typeof btn.prop === 'function' ? btn.prop(node.data) : btn.prop || '按钮';
- buttons.push(h(MyButton, {
- props: {
- name: btn.text,
- row: node.data,
- type: btn.type,
- className: btn.className || ''
- },
- on: {
- action: btn.action
- }
- }));
- }
- }
- // 单元格渲染
- let colSpan = 0;
- let cols = this.mate.columns.map((col) => {
- let value = '--',
- key = col.prop;
- if (typeof key === 'function') {
- value = key.call(this.mate._self || null, h, node.data);
- value = value instanceof Array ? value : [value];
- } else if (typeof key === 'string' && node.data[key]) {
- value = node.data[key];
- }
- colSpan = Number(col.span);
- if (colSpan <= 0) colSpan = 3;
- return h('el-col', {props: {span: colSpan}, 'class': {'text-center': col.center, 'textIndex5': true}}, value);
- });
- // 插入行按钮
- cols.push(h('el-col', {props: {span: this.actionSpan}, 'class': {'text-center': true}}, buttons));
- return h('span', [h('span', node.data.label), h('div', {'class': {'line-row': true}}, cols)]);
- }
其中渲染了个自定义的组件 MyButton 代码超简单, 如下:
html 代码
- <template>
- <el-button :size="size" :disabled="btnDisable"
- :type="type"
- @click.stop="handleAction"
- :plain="plain">
- <span class="myBtn" :class="className" v-html="name"></span>
- </el-button>
- </template>
- <script>
- export default {
- props: {
- row: {
- type: Object
- },
- /**
- * 按钮外观样式
- */
- plain: {
- type: Boolean,
- 'default': false
- },
- type: {
- type: String,
- 'default': 'text'
- },
- name: {
- type: String
- },
- className: {
- type: [Object, String]
- },
- /**
- * 按钮大小
- */
- size: {
- type: String,
- 'default': 'small'
- }
- },
- computed: {
- btnDisable: function () {
- return this.row.disabled;
- }
- },
- // 需要添加刷新消息
- methods: {
- handleAction () {
- this.$emit('action', this.row);
- },
- getSwitchValue (key) {
- if (this.act.switch) return this.act[key][Number(this.row[this.act.switch])];
- return this.act[key];
- }
- }
- };
- </script>
- <style>
- </style>
整个文件代码 点击这里 https://github.com/tianxiaofeng747/vue-treeSelect/blob/master/src/components/MyTableTree.vue
声明: 部分代码参考别人的.
另外: 其中包含下拉树组件在优化中, 还不太完善. 感兴趣的可以去看看.
来源: http://www.qdfuns.com/article/14245/c3801f12e63b045a433a48a63683536d.html