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