zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

详细列表模板 增加排序和过滤

This commit is contained in:
sakuya 2021-06-17 23:28:29 +08:00
parent c249e935ed
commit 31fbdbaccf
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/style/fix.less
View File

@ -29,6 +29,8 @@
.el-tag+.el-tag {margin-left: 10px;} .el-tag+.el-tag {margin-left: 10px;}
.el-button-group+.el-button-group {margin-left: 10px;} .el-button-group+.el-button-group {margin-left: 10px;}
.el-tabs__nav-wrap::after {height: 1px;} .el-tabs__nav-wrap::after {height: 1px;}
.el-table th.is-sortable {transition: .1s;}
.el-table th.is-sortable:hover {background: #eee;}
/* 覆盖tinymce样式 */ /* 覆盖tinymce样式 */
.sceditor .tox-tinymce {border: 1px solid #DCDFE6;} .sceditor .tox-tinymce {border: 1px solid #DCDFE6;}

12
src/views/template/list/index.vue
View File

@ -26,8 +26,8 @@
<el-main class="nopadding"> <el-main class="nopadding">
<scTable ref="table" :data="list" @selection-change="selectionChange" stripe> <scTable ref="table" :data="list" @selection-change="selectionChange" stripe>
<el-table-column type="selection" width="50"></el-table-column> <el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="ID" prop="id" width="80"></el-table-column> <el-table-column label="ID" prop="id" width="80" sortable></el-table-column>
<el-table-column label="状态" prop="state" width="60"> <el-table-column label="状态" prop="state" width="60" :filters="[{text: '正常', value: '1'}, {text: '异常', value: '2'}]" :filter-method="filterHandler">
<template #default="scope"> <template #default="scope">
<em v-if="scope.row.state=='1'" class="state state-1"></em> <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> <em v-if="scope.row.state=='2'" class="state state-2 status-processing"></em>
@ -39,7 +39,7 @@
<p>{{scope.row.subtitle}}</p> <p>{{scope.row.subtitle}}</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="类型" prop="type" width="100"> <el-table-column label="类型" prop="type" width="100" :filters="[{text: '数据', value: '数据'}, {text: '表单', value: '表单'}]" :filter-method="filterHandler">
<template #default="scope"> <template #default="scope">
<el-tag>{{scope.row.type}}</el-tag> <el-tag>{{scope.row.type}}</el-tag>
</template> </template>
@ -51,7 +51,7 @@
<el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress" status="exception"></el-progress> <el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress" status="exception"></el-progress>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" prop="time" width="150"></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"> <el-table-column label="操作" fixed="right" align="right" width="200">
<template #default="scope"> <template #default="scope">
<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button> <el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
@ -127,6 +127,10 @@
table_show(row, index){ table_show(row, index){
console.log(row, index); console.log(row, index);
this.info = true; this.info = true;
},
filterHandler(value, row, column){
const property = column.property;
return row[property] === value;
} }
} }
} }