lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

优化重构

Browse Source
This commit is contained in:
xuliangzhan
2020-04-03 12:01:54 +08:00
parent 5346f5e83a
commit c69ee8fe1c
59 changed files with 224 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
examples/plugins/xtable/renderer/components/FilterComplex.vue
View File

@@ -1,22 +1,20 @@
<template>
<div>
<div class="my-filter-complex">
<div class="my-fc-type">
<vxe-radio v-model="option.data.type" name="fType" label="has">包含</vxe-radio>
<vxe-radio v-model="option.data.type" name="fType" label="eq">等于</vxe-radio>
<vxe-radio v-model="option.data.type" name="fType" label="gt">大于</vxe-radio>
<vxe-radio v-model="option.data.type" name="fType" label="lt">小于</vxe-radio>
</div>
<div class="my-fc-name">
<vxe-input v-model="option.data.name" type="text" placeholder="请输入名称" @input="changeOptionEvent()"></vxe-input>
</div>
<div class="my-fc-iscase">
<vxe-checkbox v-model="option.data.isCase">不区分大小写</vxe-checkbox>
</div>
<div class="my-fc-footer">
<vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
<vxe-button @click="resetEvent">重置</vxe-button>
</div>
<div class="my-filter-complex">
<div class="my-fc-type">
<vxe-radio v-model="option.data.type" name="fType" label="has">包含</vxe-radio>
<vxe-radio v-model="option.data.type" name="fType" label="eq">等于</vxe-radio>
<vxe-radio v-model="option.data.type" name="fType" label="gt">大于</vxe-radio>
<vxe-radio v-model="option.data.type" name="fType" label="lt">小于</vxe-radio>
</div>
<div class="my-fc-name">
<vxe-input v-model="option.data.name" type="text" placeholder="请输入名称" @input="changeOptionEvent()"></vxe-input>
</div>
<div class="my-fc-iscase">
<vxe-checkbox v-model="option.data.isCase">不区分大小写</vxe-checkbox>
</div>
<div class="my-fc-footer">
<vxe-button status="primary" @click="confirmEvent">确认</vxe-button>
<vxe-button @click="resetEvent">重置</vxe-button>
</div>
</div>
</template>
@@ -71,7 +69,7 @@ export default {
<style scoped>
.my-filter-complex {
width: 260px;
padding: 0 8px;
padding: 5px 15px 10px 15px;
}
.my-filter-complex .my-fc-type {
padding: 8px 0;

1
examples/plugins/xtable/renderer/components/FilterContent.vue
View File

@@ -115,6 +115,7 @@ export default {
<style>
.my-filter-content {
padding: 10px;
user-select: none;
}
.my-filter-content .my-fc-search .my-fc-search-top {

109
examples/plugins/xtable/renderer/components/FilterExcel.vue
View File

@@ -1,60 +1,58 @@
<template>
<div>
<div class="my-filter-excel">
<div class="my-fe-top">
<ul class="my-fe-menu-group">
<li class="my-fe-menu-link" @click="sortAscEvent">
<i class="fa fa-sort-alpha-asc my-fe-menu-link-left-icon"></i>
<span>升序</span>
</li>
<li class="my-fe-menu-link" @click="sortDescEvent">
<i class="fa fa-sort-alpha-desc my-fe-menu-link-left-icon"></i>
<span>降序</span>
</li>
</ul>
<ul class="my-fe-menu-group">
<li class="my-fe-menu-link" @click="resetFilterEvent">
<span>清除筛选</span>
</li>
<li class="my-fe-menu-link">
<i class="fa fa-filter my-fe-menu-link-left-icon"></i>
<span>筛选条件</span>
<i class="fa fa-caret-right my-fe-menu-link-right-icon"></i>
<div class="my-fe-menu-child-list">
<ul class="my-fe-child-menu-group-list" v-for="(cList, gIndex) in caseGroups" :key="gIndex">
<li v-for="(cItem, cIndex) in cList" :key="cIndex" :class="[option.data.fMenu === cItem.value ? 'my-fe-child-menu-item active' : 'my-fe-child-menu-item']" @click="childMenuClickEvent(cItem)">
<i class="fa fa-check my-fe-child-menu-left-icon"></i>
<span>{{ cItem.label }}</span>
</li>
</ul>
</div>
</li>
</ul>
<div class="my-filter-excel">
<div class="my-fe-top">
<ul class="my-fe-menu-group">
<li class="my-fe-menu-link" @click="sortAscEvent">
<i class="fa fa-sort-alpha-asc my-fe-menu-link-left-icon"></i>
<span>升序</span>
</li>
<li class="my-fe-menu-link" @click="sortDescEvent">
<i class="fa fa-sort-alpha-desc my-fe-menu-link-left-icon"></i>
<span>降序</span>
</li>
</ul>
<ul class="my-fe-menu-group">
<li class="my-fe-menu-link" @click="resetFilterEvent">
<span>清除筛选</span>
</li>
<li class="my-fe-menu-link">
<i class="fa fa-filter my-fe-menu-link-left-icon"></i>
<span>筛选条件</span>
<i class="fa fa-caret-right my-fe-menu-link-right-icon"></i>
<div class="my-fe-menu-child-list">
<ul class="my-fe-child-menu-group-list" v-for="(cList, gIndex) in caseGroups" :key="gIndex">
<li v-for="(cItem, cIndex) in cList" :key="cIndex" :class="[option.data.fMenu === cItem.value ? 'my-fe-child-menu-item active' : 'my-fe-child-menu-item']" @click="childMenuClickEvent(cItem)">
<i class="fa fa-check my-fe-child-menu-left-icon"></i>
<span>{{ cItem.label }}</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="my-fe-search">
<div class="my-fe-search-top">
<input v-model="option.data.sVal" placeholder="搜索"/>
<i class="fa fa-search my-fe-search-icon"></i>
</div>
<div class="my-fe-search">
<div class="my-fe-search-top">
<input v-model="option.data.sVal" placeholder="搜索"/>
<i class="fa fa-search my-fe-search-icon"></i>
</div>
<ul class="my-fe-search-list" v-if="searchList.length">
<li class="my-fe-search-item" @click="sAllEvent">
<i :class="[isAllSearch ? 'fa fa-check-square-o my-fe-search-item-icon' : 'fa fa-square-o my-fe-search-item-icon']"></i>
<span>(全选)</span>
</li>
<li class="my-fe-search-item" v-for="(val, sIndex) in searchList" :key="sIndex" @click="sItemEvent(val)">
<i :class="[option.data.vals.indexOf(val) === -1 ? 'fa fa-square-o my-fe-search-item-icon' : 'fa fa-check-square-o my-fe-search-item-icon']"></i>
<span>{{ val }}</span>
</li>
</ul>
<div v-else class="body">
<div class="my-fe-search-empty">无匹配项</div>
</div>
</div>
<div class="my-fe-footer">
<vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
<vxe-button @click="resetFilterEvent">重置</vxe-button>
<ul class="my-fe-search-list" v-if="searchList.length">
<li class="my-fe-search-item" @click="sAllEvent">
<i :class="[isAllSearch ? 'fa fa-check-square-o my-fe-search-item-icon' : 'fa fa-square-o my-fe-search-item-icon']"></i>
<span>(全选)</span>
</li>
<li class="my-fe-search-item" v-for="(val, sIndex) in searchList" :key="sIndex" @click="sItemEvent(val)">
<i :class="[option.data.vals.indexOf(val) === -1 ? 'fa fa-square-o my-fe-search-item-icon' : 'fa fa-check-square-o my-fe-search-item-icon']"></i>
<span>{{ val }}</span>
</li>
</ul>
<div v-else class="body">
<div class="my-fe-search-empty">无匹配项</div>
</div>
</div>
<div class="my-fe-footer">
<vxe-button status="primary" @click="confirmFilterEvent">确认</vxe-button>
<vxe-button @click="resetFilterEvent">重置</vxe-button>
</div>
</div>
</template>
@@ -280,11 +278,6 @@ export default {
</script>
<style>
.vxe-table--filter-wrapper.my-filter-excel-wrapper .vxe-table--filter-template {
overflow: initial;
max-height: initial;
padding: 0;
}
.my-filter-excel {
user-select: none;
}

15
examples/plugins/xtable/renderer/components/FilterInput.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<input type="text" v-model="option.data" @input="changeOptionEvent">
<div class="my-filter-input">
<input type="text" v-model="option.data" placeholder="支持回车筛选" @keyup.enter="enterEvent" @input="changeOptionEvent">
</div>
</template>
@@ -37,7 +37,18 @@ export default {
const { $panel } = params
const checked = !!option.data
$panel.changeOption(null, checked, option)
},
enterEvent () {
const { params } = this
const { $panel } = params
$panel.confirmFilter()
}
}
}
</script>
<style scoped>
.my-filter-input {
padding: 10px;
}
</style>

18
examples/plugins/xtable/renderer/filter.js
View File

@@ -12,19 +12,7 @@ Vue.component(FilterContent.name, FilterContent)
Vue.component(FilterComplex.name, FilterComplex)
Vue.component(FilterExcel.name, FilterExcel)
// 创建一个简单的筛选渲染
VXETable.renderer.add('MyFilter', {
// 筛选模板
renderFilter (h, renderOpts, params) {
const { column } = params
const option = column.filters[0]
return [
<input v-model={ option.data } placeholder="请输入名称" />
]
}
})
// 创建一个支持输入的筛选
// 创建一个简单的输入框筛选
VXETable.renderer.add('FilterInput', {
// 筛选模板
renderFilter (h, renderOpts, params) {
@@ -36,8 +24,7 @@ VXETable.renderer.add('FilterInput', {
filterMethod ({ option, row, column }) {
const { data } = option
const cellValue = XEUtils.get(row, column.property)
/* eslint-disable eqeqeq */
return cellValue == data
return XEUtils.toString(cellValue).indexOf(data) > -1
}
})
@@ -110,7 +97,6 @@ VXETable.renderer.add('FilterComplex', {
// 创建一个实现Excel的筛选器
VXETable.renderer.add('FilterExcel', {
className: 'my-filter-excel-wrapper',
// 不显示底部按钮，使用自定义的按钮
isFooter: false,
// 筛选模板