This commit is contained in:
sc
parent
a6cdfde659
commit
a60fea7d72
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="setting-column">
|
||||
<div class="sys">
|
||||
<h4>隐藏</h4>
|
||||
<h4>左固定</h4>
|
||||
<ul>
|
||||
<draggable v-model="sys" animation="200" group="people" :sort="false" item-key="prop">
|
||||
<template #item="{ element }">
|
||||
|
|
@ -14,11 +15,11 @@
|
|||
</ul>
|
||||
</div>
|
||||
<div class="user">
|
||||
<h4>显示</h4>
|
||||
<h4>普通</h4>
|
||||
<ul>
|
||||
<draggable v-model="user" animation="200" group="people" @change="change" item-key="prop">
|
||||
<template #item="{ element }">
|
||||
<li>{{ element.label }}</li>
|
||||
<li>{{ element.label }} <el-checkbox v-model="element.sortable">排序</el-checkbox></li>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-empty v-if="user.length == 0" description="没有显示列" :image-size="50"></el-empty>
|
||||
|
|
@ -26,11 +27,27 @@
|
|||
</draggable>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="fixedRight">
|
||||
<h4>右固定</h4>
|
||||
<ul>
|
||||
<draggable v-model="fixedRight" animation="200" group="people" :sort="false" item-key="prop">
|
||||
<template #item="{ element }">
|
||||
<li>{{ element.label }}</li>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-empty v-if="fixedRight.length == 0" description="没有隐藏列" :image-size="50"></el-empty>
|
||||
</template>
|
||||
</draggable>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<el-button @click="backDefaul">重置</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable
|
||||
|
|
@ -40,25 +57,35 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
sys: [
|
||||
{label: "姓名", prop: "name"},
|
||||
{label: "性别", prop: "sex"},
|
||||
{label: "头像", prop: "a"},
|
||||
{label: "加入时间", prop: "time"}
|
||||
],
|
||||
user: []
|
||||
defaultColumn: JSON.parse(JSON.stringify(this.column||[])),
|
||||
sys: [],
|
||||
user: [],
|
||||
fixedRight: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.sys = this.column || []
|
||||
//this.sys = this.column.filter(item => item.hide ) || []
|
||||
//this.user = this.column.filter(item => !item.hide ) || []
|
||||
},
|
||||
methods: {
|
||||
change(){
|
||||
this.$emit('userChange', this.user)
|
||||
backDefaul(){
|
||||
var defaultColumn = JSON.parse(JSON.stringify(this.defaultColumn));
|
||||
this.sys = defaultColumn.filter(item => item.hide ) || []
|
||||
this.user = defaultColumn.filter(item => !item.hide ) || []
|
||||
console.log(defaultColumn)
|
||||
this.$emit('userChange', defaultColumn)
|
||||
},
|
||||
change(evt){
|
||||
if(evt.added){
|
||||
delete evt.added.element.hide
|
||||
}else if(evt.removed){
|
||||
evt.removed.element.hide=true
|
||||
}
|
||||
this.$emit('userChange', {...this.sys, ...this.user})
|
||||
},
|
||||
remove(index){
|
||||
this.sys.push(this.user[index]);
|
||||
this.user.splice(index, 1);
|
||||
this.user.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,7 +96,7 @@
|
|||
.setting-column > div > ul {margin-top: 15px;height:300px;overflow: auto;}
|
||||
.setting-column > div > ul > div {height: 100%;}
|
||||
.setting-column > div > ul li {cursor: move;font-size: 12px;list-style-type: none;height:32px;line-height: 32px;background: #ecf5ff;color: #409EFF;border: 1px solid #d9ecff;border-radius: 4px;padding: 0 8px;margin-bottom:5px;}
|
||||
.setting-column .sys {flex:1;margin-right:15px;padding-right:15px;border-right: 1px solid #eee;}
|
||||
.setting-column .user {flex:1;}
|
||||
.setting-column .sys {width: 150px;margin-right:15px;padding-right:15px;border-right: 1px solid #eee;}
|
||||
.setting-column .user {flex: 1;}
|
||||
.sortable-ghost {opacity: 0.5;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,19 @@
|
|||
<div class="scTable-table">
|
||||
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow" @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange" @filter-change="filterChange">
|
||||
<slot></slot>
|
||||
<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
|
||||
<template #default="scope">
|
||||
{{scope.row[item.prop]}}
|
||||
</template>
|
||||
<template #header>
|
||||
{{item.label}}
|
||||
<i class="el-icon-remove" style="color: #F56C6C;cursor: pointer;" @click="removeColumn(index)"></i>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(item, index) in userColumn" :key="index">
|
||||
<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler">
|
||||
<template #default="scope">
|
||||
<slot :name="item.prop" v-bind="scope">
|
||||
{{scope.row[item.prop]}}
|
||||
</slot>
|
||||
</template>
|
||||
<template #header>
|
||||
{{item.label}}
|
||||
<i class="el-icon-remove" style="color: #F56C6C;cursor: pointer;" @click="removeColumn(index)"></i>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column min-width="1"></el-table-column>
|
||||
<template #empty>
|
||||
<el-empty :description="emptyText" :image-size="100"></el-empty>
|
||||
|
|
@ -24,7 +28,7 @@
|
|||
</div>
|
||||
<div class="scTable-do" v-if="!hideDo">
|
||||
<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
|
||||
<el-popover placement="top" title="设置" :width="500" trigger="click">
|
||||
<el-popover placement="top" title="设置" :width="600" trigger="click">
|
||||
<template #reference>
|
||||
<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
|
||||
</template>
|
||||
|
|
@ -82,7 +86,7 @@
|
|||
loading: false,
|
||||
tableHeight:'100%',
|
||||
tableParams: this.params,
|
||||
userColumn: []
|
||||
userColumn: this.column
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -179,6 +183,11 @@
|
|||
}
|
||||
this.getData()
|
||||
},
|
||||
//本地过滤
|
||||
filterHandler(value, row, column){
|
||||
const property = column.property;
|
||||
return row[property] === value;
|
||||
},
|
||||
//过滤事件
|
||||
filterChange(filters){
|
||||
if(!this.remoteFilter){
|
||||
|
|
|
|||
|
|
@ -30,33 +30,34 @@
|
|||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :data="list" :column="column" @selection-change="selectionChange" stripe>
|
||||
<!-- 扩展行 -->
|
||||
<el-table-column type="expand">
|
||||
<template #default="props">
|
||||
<div>{{ props.row.name }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 各列自定义template -->
|
||||
<template #state="scope">
|
||||
<em v-if="scope.row.state=='1'" class="state state-1"></em>
|
||||
<em v-if="scope.row.state=='2'" class="state state-2 status-processing"></em>
|
||||
</template>
|
||||
<template #name="scope">
|
||||
<h4>{{scope.row.name}}</h4>
|
||||
<p>{{scope.row.subtitle}}</p>
|
||||
</template>
|
||||
<template #type="scope">
|
||||
<el-tag>{{scope.row.type}}</el-tag>
|
||||
</template>
|
||||
<template #progress="scope">
|
||||
<el-progress v-if="scope.row.state=='1'" :percentage="scope.row.progress"></el-progress>
|
||||
<el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress" status="exception"></el-progress>
|
||||
</template>
|
||||
|
||||
<!-- 固定列-选择列 -->
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="ID" prop="id" width="80" sortable></el-table-column>
|
||||
<el-table-column label="状态" prop="state" width="60" :filters="[{text: '正常', value: '1'}, {text: '异常', value: '2'}]" :filter-method="filterHandler">
|
||||
<template #default="scope">
|
||||
<em v-if="scope.row.state=='1'" class="state state-1"></em>
|
||||
<em v-if="scope.row.state=='2'" class="state state-2 status-processing"></em>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="名称" prop="name" width="300">
|
||||
<template #default="scope">
|
||||
<h4>{{scope.row.name}}</h4>
|
||||
<p>{{scope.row.subtitle}}</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" prop="type" width="100" :filters="[{text: '数据', value: '数据'}, {text: '表单', value: '表单'}]" :filter-method="filterHandler">
|
||||
<template #default="scope">
|
||||
<el-tag>{{scope.row.type}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" prop="user" width="100"></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="250">
|
||||
<template #default="scope">
|
||||
<el-progress v-if="scope.row.state=='1'" :percentage="scope.row.progress"></el-progress>
|
||||
<el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress" status="exception"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="time" width="150" sortable></el-table-column>
|
||||
|
||||
<!-- 固定列-操作列 -->
|
||||
<el-table-column label="操作" fixed="right" align="right" width="200">
|
||||
<template #default="scope">
|
||||
<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
||||
|
|
@ -127,8 +128,46 @@
|
|||
}
|
||||
],
|
||||
column: [
|
||||
{label: "状态值", prop: "state", width: "100"},
|
||||
{label: "进度值", prop: "progress", width: "150"},
|
||||
{
|
||||
label: "ID",
|
||||
prop: "id",
|
||||
width: "100",
|
||||
sortable: true,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
label: "名称",
|
||||
prop: "name",
|
||||
width: "300"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "state",
|
||||
width: "100",
|
||||
filters: [{text: '正常', value: '1'}, {text: '异常', value: '2'}]
|
||||
},
|
||||
{
|
||||
label: "类型",
|
||||
prop: "type",
|
||||
width: "100",
|
||||
filters: [{text: '数据', value: '数据'}, {text: '表单', value: '表单'}]
|
||||
},
|
||||
{
|
||||
label: "负责人",
|
||||
prop: "user",
|
||||
width: "100"
|
||||
},
|
||||
{
|
||||
label: "进度",
|
||||
prop: "progress",
|
||||
width: "250"
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
prop: "time",
|
||||
width: "150",
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
group: "0",
|
||||
selection: [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue