Skip to content

M
mes-ui
Commit d0c65d4d authored by 周远喜's avatar 周远喜
Browse files
Options

treetable 完成

parent fc14e32c
Show whitespace changes
Inline Side-by-side
Showing with 174 additions and 67 deletions
components/page/treeGrid/columnSolt.js
View file @ d0c65d4d
export default {
name: 'ColumnSlot',
functional: true,
inject: ['slots'],
props: {
row: Object,
index: Number,
......@@ -10,7 +11,7 @@ export default {
}
},
render: (h, ctx) => {
return h('div', ctx.injections.$scopedSlots[ctx.props.column.slot]({
return h('span', ctx.injections.slots()[ctx.props.column.slot]({
row: ctx.props.row,
column: ctx.props.column,
index: ctx.props.index
......
components/page/treeGrid/index.vue
View file @ d0c65d4d
......@@ -14,21 +14,21 @@
<table>
<thead>
<tr>
<th v-for="(column,index) in cloneColumns" :key="index">
<th v-for="(column, index) in cloneColumns" :key="index">
<label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll" />全选
<Checkbox v-model="all"></Checkbox>
</label>
<label v-else>
{{ renderHeader(column, index) }}
<span class="ivu-table-sort" v-if="column.sortable">
<Icon
type="arrow-up-b"
:class="{on: column._sortType === 'asc'}"
:class="{ on: column._sortType === 'asc' }"
@click.native="handleSort(index, 'asc')"
/>
<Icon
type="arrow-down-b"
:class="{on: column._sortType === 'desc'}"
:class="{ on: column._sortType === 'desc' }"
@click.native="handleSort(index, 'desc')"
/>
</span>
......@@ -38,102 +38,168 @@
</thead>
<tbody>
<tr
v-for="(item,index) in initItems"
v-for="(item, index) in initItems"
:key="item.id"
v-show="show(item)"
class="treetr"
:class="{'child-tr':item.parent}"
:class="{ 'child-tr': item.parent }"
:draggable="drag"
@dragstart="dragstart($event, index, item)"
@dragover="dragover($event, index, item)"
@drop="dragdrop($event, index, item)"
>
<td v-for="(column,snum) in columns" :key="column.key" :style="tdStyle(column)">
<!-- <label>
<input
v-if="column.type === 'selection'"
type="checkbox"
:value="item.id"
v-model="checkGroup"
@click="handleCheckClick(item,$event,index)"
/>
</label>-->
<td
v-for="(column, snum) in columns"
:key="column.key"
:style="tdStyle(column)"
>
<!-- 多选 -->
<label v-if="column.type === 'selection'" @click="handleCheckClick(item, $event, index)">
<Checkbox v-model="item.checked" ></Checkbox>
</label>
<!-- 图标 -->
<div v-if="column.type === 'icon'">
<i
class="icon-set"
size="small"
@click="RowClick(item,$event,index,action.text)"
v-for="action in (column.actions)"
@click="RowClick(item, $event, index, action.text)"
v-for="action in column.actions"
:key="action.text"
>
<Icon :type="action.type" :title="action.text" :style="action.style" />
<Icon
:type="action.type"
:title="action.text"
:style="action.style"
/>
</i>
</div>
<div v-if="column.type === 'icons'">
<Icon :type="item[column.key]" size="20" />
</div>
<state v-if="column.code" :code="column.code" :value="item[column.key]" />
<state
v-if="column.code"
:code="column.code"
:value="item[column.key]"
/>
<!-- 操作 -->
<div v-if="column.type === 'action'" class="action" style="text-align:left;">
<div
v-if="column.type === 'action'"
class="action"
style="text-align: left"
>
<op
v-for="action in (column.actions)"
v-for="action in column.actions"
:key="action.text"
@click="RowClick(item,$event,index,action.text)"
@click="RowClick(item, $event, index, action.text)"
:type="action.type"
size="small"
style=" margin:0 5px;"
:class="action.text=='删除'? 'remove' : (action.text=='新增' ? 'add': (action.text=='编辑' ?'edit':''))"
v-show="(item.type=='3'&&action.text=='新增')||(item.children.length>0&&action.text=='删除')?false:true"
>{{action.text}}</op>
style="margin: 0 5px"
:class="
action.text == '删除'
? 'remove'
: action.text == '新增'
? 'add'
: action.text == '编辑'
? 'edit'
: ''
"
v-show="
(item.type == '3' && action.text == '新增') ||
(item.children.length > 0 && action.text == '删除')
? false
: true
"
>{{ action.text }}</op
>
</div>
<!-- 类型 -->
<div v-if="column.type === 'menuRender'" style="text-align:center;">
<div v-if="column.type === 'menuRender'" style="text-align: center">
<Button
:ghost="item[column.key] ==0 ?false:true"
:ghost="item[column.key] == 0 ? false : true"
size="small"
:type="item[column.key] ==0 ? 'default' :item[column.key] == 1 ? 'info' :item[column.key] == 2?'error':'warning'"
>{{item[column.key] == 0 ? '子系统':item[column.key] == 1 ? '目录': item[column.key] == 2 ? '菜单' : '按钮'}}</Button>
:type="
item[column.key] == 0
? 'default'
: item[column.key] == 1
? 'info'
: item[column.key] == 2
? 'error'
: 'warning'
"
>{{
item[column.key] == 0
? "子系统"
: item[column.key] == 1
? "目录"
: item[column.key] == 2
? "菜单"
: "按钮"
}}</Button
>
</div>
<!-- 状态 -->
<div v-if="column.type === 'menuIsshow'" style="text-align:center;">
<div v-if="column.type === 'menuIsshow'" style="text-align: center">
<Button
:ghost="item[column.key] == 1 ? true :false"
:disabled="item[column.key] == 1 ? false :true"
:ghost="item[column.key] == 1 ? true : false"
:disabled="item[column.key] == 1 ? false : true"
size="small"
:type="item[column.key] == 1 ? 'info' :'default'"
>{{item[column.key] == 1 ? '显示': '隐藏'}}</Button>
:type="item[column.key] == 1 ? 'info' : 'default'"
>{{ item[column.key] == 1 ? "显示" : "隐藏" }}</Button
>
</div>
<!-- 打开方式 -->
<div v-if="column.type === 'menuTarget'">
<span
:style="item[column.key] == 0?'color:#006699':item[column.key] == 1?'color:black':''"
>{{item[column.key] == 0 ? '本页面': item[column.key] == 1?'新页面':''}}</span>
:style="
item[column.key] == 0
? 'color:#006699'
: item[column.key] == 1
? 'color:black'
: ''
"
>{{
item[column.key] == 0
? "本页面"
: item[column.key] == 1
? "新页面"
: ""
}}</span
>
</div>
<!-- 菜单名称、排序、请求地址 -->
<label @click="toggle(index,item)" v-if="!column.type&&!column.code&&!column.render">
<span v-if="snum==iconRow()">
<!-- 树图标 -->
<span @click="toggle(index, item)" v-if="snum == iconRow()">
<i v-html="item.spaceHtml"></i>
<a v-if="item.children&&item.children.length>0">
<a v-if="item.children && item.children.length > 0">
<i
class="ivu-icon"
:class="{'ivu-icon-ios-arrow-forward':!item.expanded,'ivu-icon-ios-arrow-down':item.expanded }"
></i>
</a>
<i v-else class="ms-tree-space"></i>
:class="{
'ivu-icon-ios-arrow-forward': !item.expanded,
'ivu-icon-ios-arrow-down': item.expanded,
}"
></i> </a
><i v-else class="ms-tree-space"></i>
</span>
{{renderBody(item,column) }}
<!-- 菜单名称、排序、请求地址 -->
<label
v-if="
!column.type && !column.code && !column.render && !column.slot
"
>
{{ renderBody(item, column) }}
</label>
<table-expand
v-if="column.render&&!column.type&&!column.solt"
v-if="column.render && !column.type && !column.solt"
:row="item"
:column="column"
:index="snum"
:render="column.render"
></table-expand>
<!-- <column-slot v-if="column.slot"
<column-slot
v-if="column.slot"
:row="item"
:column="column"
:index="snum"></column-slot> -->
{{column.solt}}
<slot v-if="column.solt" v-bind:="item">fsafd</slot>
:index="snum"
></column-slot>
</td>
</tr>
</tbody>
......@@ -142,10 +208,10 @@
</template>
<script>
import TableExpand from "./expand";
import ColumnSlot from "./columnSolt"
import ColumnSlot from "./columnSolt";
export default {
name: "treeGrid",
components: { TableExpand ,ColumnSlot},
components: { TableExpand, ColumnSlot },
props: {
columns: Array,
items: {
......@@ -155,10 +221,20 @@ export default {
},
},
iconName: false,
drag:{
type:Boolean,
default:false
}
},
provide() {
return {
slots: this.chachao,
};
},
data() {
return {
color: "#19be6b",
all:true,
initItems: [], // 处理后数据数组
cloneColumns: [], // 处理后的表头数据
checkGroup: [], // 复选框数组
......@@ -167,6 +243,7 @@ export default {
tdsWidth: 0, // td总宽
timer: false, // 控制监听时长
dataLength: 0, // 树形数据长度
dragIndex:-1,//拖拽开始的序号
};
},
computed: {
......@@ -210,6 +287,7 @@ export default {
},
},
mounted() {
console.warn("treegrid", this.$scopedSlots);
if (this.items) {
this.dataLength = this.Length(this.items);
this.initData(this.deepCopy(this.items), 1, null);
......@@ -232,14 +310,30 @@ export default {
})();
},
methods: {
chachao() {
return this.$scopedSlots;
},
//拖拽
dragstart(e,index, row ) {
this.dragIndex=index;
console.log(index)
},
dragover(e,index, row ) {
e.preventDefault();
},
dragdrop(e,index, row ) {
event.preventDefault();
this.$emit("on-drag-drop",this.dragIndex,index,this.initItems)
},
// 有无多选框折叠位置优化
iconRow() {
var num = 0;
for (let i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].type == "selection") {
return 1;
if (this.columns[i].tree) {
num = i;
}
}
return 0;
return num;
},
// 设置td宽度,td的align
tdStyle(column) {
......
pages/test/example/tree/index.vue
View file @ d0c65d4d
<template>
<div class="tree">
<TreeGrid :columns="columns" :items="treeData">
<template slot-scope="row" slot="action">
<strong>{{ row.id }}</strong>
<template slot-scope="{row,column,index}" slot="name">
<Icon type="md-folder" /> {{row.name}}
</template>
<template slot-scope="{row,column,index}" slot="action">
<strong>{{row.action}}</strong>
</template>
</TreeGrid>
<!-- <Input v-model="data" type="textarea" rows="20" placeholder=""></Input> -->
......@@ -16,20 +19,28 @@ export default {
data() {
return {
columns: [
{
type: "selection",
width:50,
align:"center"
},
{
key: "name",
title: "名称",
tree:true,
slot:"name"
},
{
key: "status",
title: "状态",
width: "100",
width: "100"
},
{
key: "action",
title: "操作",
width: "100",
solt:"action"
sortable:true,
slot:"action"
},
],
treeData1: [],
......@@ -56,6 +67,7 @@ export default {
},
mounted() {
// this.init();
},
methods: {
init() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment