vsyswin-ui

一、vsyswin-ui

打包发布组件包

npm run lib
npm publish

安装

yarn add vsyswin-ui
or
npm install vsyswin-ui --save

使用

建议将 vue 升级到 2.x 最新 2.6.11

vsyswin-ui 组件依赖于 vue 和 element-ui，对树的搜索推荐使用 xe-utils 工具

所以使用的项目中需要先安装上面 3 个 package: npm i vue emement-ui xe-utils --save

在 main.js 文件中引入插件并注册 ui

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 导入组件库
import vSyswinUI from 'vsyswin-ui'

Vue.use(ElementUI)

// 注册组件库
Vue.use(vSyswinUI)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

注意：组件库的树因为是基于 jquery 的 ztree 进行的封装，使用的 vue 项目中不要再引入 jquery 了，使用 组件 tree 的地方容易引发未知错误，老项目中应删除 jquery 的依赖，并将使用 jquery 选择器的地方修改成 document.querySelector 方式 (不建议在 vue 项目中再使用 jquery，完全可以数据驱动)

效果

二、组件文档

1、布局 sy-layout

1.1 基础布局

1.1.1 基础布局包含

1. 标题 title，以 prop 属性的方式传入

   如果标题不仅于文字，可以 slot 填入，如 tab 标签标题

   <template v-slot:headLeft>
     <h2>标题</h2>
   </template>

2. 标题右侧如果有内容，可以使用插槽

   <template v-slot:headRight>
     <div>展示头部右侧选中的项目</div>
   </template>

1.1.2 示例

<sy-layout title="物料类别">
  <template v-slot:headRight>
    <div>展示头部右侧选中的项目</div>
  </template>
  我是内容区域, 是默认插槽，此处可放置查询条件、表格、分页
</sy-layout>

1.2 左右布局

1.2.1 左右布局包含

1. 标题 title，以 prop 属性的方式传入

2. 标题右侧如果有内容，可以使用插槽

   <template v-slot:headRight>
     <div>展示头部右侧选中的项目</div>
   </template>

3. 左侧树的插槽

   • v-slot:left
   • 右侧内容为默认插槽

1.2.2 示例

<sy-layout title="物料类别" hasTreeLeft>
  <template v-slot:headRight>
    <div>展示头部右侧选中的项目</div>
  </template>
  <template v-slot:left>
    <h1>我是左侧的区域</h1>
  </template>
  我是内容区域, 是默认插槽，此处可放置查询条件、表格、分页
</sy-layout>

1.3 tab标签页布局

1.3.1 组件说明

布局时不再传入标题属性，而改成用 headLeft 插槽

1.3.2 示例

<template>
  <sy-layout>
    <template v-slot:headLeft>
      <el-tabs v-model="activeName" class="title-tabs">
        <el-tab-pane label="工单规则" name="workRules" v-if="accessCode['param_set_work_rules']"> </el-tab-pane>
        <el-tab-pane label="关单设置" name="documentSet" v-if="accessCode['param_set_document_set']"> </el-tab-pane>
      </el-tabs>
    </template>
    <keep-alive>
      <component :is="activeName"></component>
    </keep-alive>
  </sy-layout>
</template>
<script>
  import workRules from './child/workRules'
  import documentSet from './child/documentSet'
  export default {
    name: 'paramSet',
    components: {
      workRules,
      documentSet
    },
    data() {
      return {
        activeName: 'workRules',
        accessCode: {
          param_set_work_rules: false, // 工单规则
          param_set_document_set: false // 关单设置
        }
      }
    },
    mounted() {
      this.getAccessCode()
    }
  }
</script>
<style lang="less" scoped></style>

2、搜索树组件

说明：树组件是基于ztree3.5.x的版本做的封装，组件加载完成后会生成 ztreeObj 对象, 配置项可以参考 ztree 的文档

2.1 左侧搜索树

2.1.1 基本使用

<sy-search-tree ref="leftTree" :setting="setting" :nodes="nodes" <!-- 传递给树组件的数据 -->
  @onClick="onClick"
  <!-- 处理组件中的点击选中某一节点的事件 -->
  @onCreated="handleCreated"
  <!-- 树组件生成完成后的回调，主要用于在当前页ztreeObj对象，方便对树再次进行操作 -->
  @searchTree="searchTree"
  <!-- 搜索事件,对数据进行过滤后，生成新的nodes数据，树将进行变更 -->
  /></sy-search-tree
>

import XEUtils from 'xe-utils' // 用这个工具类对树数据进行搜索

export default {
    data () {
        return {
            ztreeObj: null,
            setting: {
                check: {
                    enable: false
                },
                data: {
                    // 设置图标库(采用iconfont class形式)
                    iconMap: {
                        1: 'icon-jituan',
                        2: 'icon-fengongsi',
                        3: 'icon-fengongsi',
                        4: 'icon-guanlichu',
                        5: 'icon-xiangmu',
                        6: 'icon-quyu',
                        7: 'icon-loudong',
                        8: 'icon-danyuan',
                        9: 'icon-fangjian'
                    },
                    // 设置对应每个节点的节点类型，与数据中customType
                    key: {
                        idKey: 'nodeId', // 树数据的主字段名
                        nodeType: 'customType', // 这是固定的，图标使用自定义的类型
                        name: 'nodeName', // 树的名称字段
                        title: 'nodeName', // 标题字段
                        children: 'childList' // 子节点的字段名
                    }
                },
                view: {
                    // 开启图标显示功能
                    showIcon: true
                }
            },
            nodes: ztreeData
        }
    },
    methods: {
        onClick: function (evt, treeId, treeNode) {
            // 点击事件
            console.log(evt.type, treeNode)
        },
        onCheck: function (evt, treeId, treeNode) {
            // 选中事件，需要开启 check: {enable: true}
            console.log(evt.type, treeNode)
        },
        handleCreated: function (ztreeObj) {
            this.ztreeObj = ztreeObj
            // onCreated 中操作ztreeObj对象展开第一个节点
            ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
            this.$refs.leftTree.setSelectedNode('10845') // 设置选中的节点
        },
        searchTree (keyword) {
            console.log('你搜索的关键字', keyword)
            if (keyword) {
                const options = { children: 'childList' }
                const searchProps = ['nodeName']
                this.nodes = XEUtils.searchTree(ztreeData, item => item.nodeName.indexOf(keyword) > -1, options)
            } else {
                this.nodes = ztreeData
            }
        }
    }
}
</script>

2.1.2 树组件的props

props: {
	setting: { // 树的设置对象
		type: Object,
		required: false,
		default: () => ({})
	},
	nodes: { // 树数据，是一个数组
		type: Array,
		required: true,
		default: () => ([])
	},
	searchable: { // 是否可以搜索，用于是否展示头部的搜索框
		type: Boolean,
		required: false,
		default: true
	},
	placeholder: { // 搜索框的提示文字
		type: String,
		required: false,
		default: '请输入搜索关键字'
	},
	beforeClickFn: { type: Function }, // 节点被点击之前的处理函数（可选），比如： 只能选择nodeType='5'的节点
	beforeCheckFn: { type: Function } // 同上面的方法类似，多选的情况下使用
}

2.1.3 树组件暴露的方法

// 1. setSelectedNode(nodeId: string)
this.$refs.leftTree.setSelectedNode('10845') // 设置选中的节点

// 2. setCheckedNodes(checkedKeys: string[])
this.$refs.leftTree.setCheckedNodes(['10845']) // 设置勾选的节点

2.2 右侧项目选择树组件

2.2.1 基本使用

<sy-select-project ref="selectProject" :nodes="projectNodes" <!-- 传递给组件的树数据 -->
  @search="searchProject"
  <!-- 执行搜索 -->
  @click="onSelectProject"
  <!-- 选中某个项目 -->
  :beforeClick="beforeClick">
  <!-- 树节点被选中之前的处理函数 -->
</sy-select-project>

searchProject (keyword) {
	console.log('你搜索的关键字', keyword)
	if (keyword) {
		const options = { children: 'childList' }
		this.projectNodes = XEUtils.searchTree(ztreeData, item => item.nodeName.indexOf(keyword) > -1, options)
	} else {
		this.projectNodes = ztreeData
	}
},
onSelectProject (projectNode) { // 选中单个项目
	console.log('当前选择的项目节点：', projectNode)
},

mounted () {
    this.$refs.selectProject.setSelectedNode('10845') // 初始化后设置选中的项目
}

2.2.2 项目选择树的 props

props: {
	setting: {
		type: Object,
		required: false,
		default: () => ({})
	},
	nodes: {
		type: Array,
		default: () => ([])
	},
	placeholder: {
		type: String,
		default: '请输入搜索关键字'
	},
	beforeClick: { type: Function } // 选中节点之前的处理事件，如不允许选择nodeType='2'的节点
}

如果要对项目选择树的树数据进行重写，例如，树的主键字段不是 nodeId，此时可以传递 setting 对默认配置进行覆写

3、搜索工具栏

3.1 简单搜索工具栏

适用于少量输入框，右侧是操作按钮的简易布局

3.1.1 简单搜索工具栏包含的 props

1. placeholder： 搜索框的提示文字，如果自定义了插槽 filterInput，该属性可忽略
2. value： 字符串类型，可以使用 v-model的方式进行传入

3.1.2 基本使用

<sy-simple-search-bar v-model="keyword" @search="handleSearch">
  <el-button type="text" icon="el-icon-plus">新建细类</el-button>
</sy-simple-search-bar>

<!-- 也可 -->
<sy-simple-search-bar>
  <template #filterInput>
    <el-input class="header-filter-input" placeholder="请输入名字" v-model.trim="keyword" @input="handleSearch" clearable>
      <el-button type="primary" slot="append" icon="el-icon-search" @click="keyword && handleSearch()"></el-button>
    </el-input>
  </template>
  <template #default>
    <el-button type="text" icon="el-icon-plus">新建细类</el-button>
  </template>
</sy-simple-search-bar>

4、搜索栏

4.1 说明

适用于表格页面上面的搜索栏区域内容

4.1.1 搜索栏的 props 说明

1. searchList: 更多筛选条件的列表数据，具体格式请参照基本使用例子
2. placeholder: 输入框 input 的 placeholder 属性值
3. showFilter: 判断是否显示更多筛选和重置按钮
4. searchButtonText: 搜索按钮的文字
5. resetButtonText: 重置按钮的文字
6. storageName: 保存筛选条件数据的 localStorage 的 key
7. saveToLocalPosition: 保存搜索条件的操作按钮显示在左侧还是右侧（默认右侧），取值： left, right

4.1.2 搜索栏的 events 事件说明

1. on-search: 点击搜索按钮时触发的事件
2. on-reset: 点击重置按钮时触发的事件

handleSearch (value) {
    // 返回值的例子：
    // value = {
    //     "keyword": "", // 搜索栏的输入值
    //     "filterList": [
    //         {
    //             "pId": 1,
    //             "pName": "对应业务1",
    //             "id": 1,
    //             "name": "2021-01-01至2021-01-31",
    //             "value": [
    //                 1609430400000,
    //                 1612022400000
    //             ],
    //             "type": "daterange"
    //         },
    //         {
    //             "pId": 2,
    //             "pName": "对应业务2",
    //             "id": 1,
    //             "name": "加急工单预警21",
    //             "value": 1,
    //             "type": "text"
    //         }
    //     ]
    // };
},

4.1.3 基本使用

<sy-searchbar :searchList="searchList" @on-search="handleSearch" @on-reset="handleReset"> </sy-searchbar>

searchList: [
  {
    id: 1, // 区分筛选行的唯一值
    name: '对应业务1', // 筛选行的名称
    multiple: false, // 判断是否为多选(false: 单选; true: 多选)
    itemList: [
      {
        id: 1, // 区分各个选项的唯一值
        name: '', // 选项的名称
        value: null, // 选项的值
        type: 'daterange', // 选项的类型(text: 文字; daterange: 日期选择器)
        isActive: false // 当前选项是否选中
      }
    ]
  },
  {
    id: 2,
    name: '对应业务2',
    multiple: true,
    itemList: [
      {
        id: 1,
        name: '加急工单预警21',
        value: 1,
        type: 'text',
        isActive: false
      }
    ]
  }
]

4.1.4 插槽按钮

<sy-searchbar :searchList="searchList" @on-search="handleSearch" @on-reset="handleReset" saveToLocalPosition="left">
    <template v-slot:listBtns>
        <el-button type="text" icon="el-icon-plus">新建楼栋</el-button>
        <el-button type="text" icon="el-icon-receiving">批量导入</el-button>
        <el-dropdown trigger="click" size="medium" divided @command="handleCommand" placement="bottom-end">
                <div style="width: 18px;height: 18px; cursor:pointer;"><i class="el-icon-more"></i></div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="masterHouseCodeVisible" icon="el-icon-circle-plus-outline"
                        >导入主数据编码</el-dropdown-item
                    >
                    <el-dropdown-item command="generateBuildingBatch" icon="el-icon-files"
                        >批量生成</el-dropdown-item
                    >
                    <el-dropdown-item command="export_all" icon="el-icon-upload2"
                        >全部导出</el-dropdown-item
                    >
                </el-dropdown-menu>
        </el-dropdown>
    </template>
</sy-searchbar>

5、表格组件

Table Attributes

参数 说明 类型 默认值 data 表格显示的数据 array []

columns 表格表头数据 array []

height 表格高度 string

transContent 表格内容转换的方法 Function(row, prop)

sumInfo 需要合计列的 prop 及对应全部合计值 Object 如{money: 1000} showSummary 是否显示合计功能 Boolean false

showChoiseSum 是否显示选中合计 Boolean false

showPageSum 是否显示分页合计 Boolean true

rowKey 行数据的 Key，用来优化 Table 的渲染;在使用 String reserve-selection 功能与显示树形数据时, 该属性是必填的。

indent 展示树形数据时, 树节点的缩进 Number lazy 是否懒加载子节点数据 Boolean false

load 加载子节点数据的函数 lazy 为 true 时生效 Function(row, treeNode, resolve) 函数第二个参数包含了节点的层级信息 treeProps 渲染嵌套数据的配置选项 Object 同 el-table

defaultExpandAll 是否默认展开所有行，当 Table 包含展开行 Boolean false
存在或者为树形表格时有效

expandRowKeys 可以通过该属性设置 Table 目前的展开行，需要设置 Array row-key 属性才能使用，该属性为展开行的 keys 数组。

showDragSet 是否显示表格右上角设置功能 Boolean true

Table Events

事件名 说明 参数 selection-change 当选择项发生变化时会触发该事件 selection

header-dragend 当拖动表头改变了列的宽度的时候会触发该事件 newWidth, oldWidth, column, event

cell-click 当某个单元格被点击时会触发该事件 row, column

sort-change 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }

expand-change 当用户对某一行展开或者关闭的时候会触发该 row, (expandedRows | expanded) 事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）

drag-change 改变列表设置事件 list

filter-change 当表格的筛选条件发生变化的时候会触发该事件 column ，参数的值是一个对象对应的 value 为用户 选择的筛选条件的值。

Table Methods

方法名 说明 参数

doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时， 可能需要调用此方法 clearSelection 清空用户的选择，用于多选表格

toggleRowSelection 用于多选表格，切换某一行的选中状态， row, selected 如果使用了第二个参数，则是设置这一行 选中与否（selected 为 true 则选中）

toggleAllSelection 用于多选表格，切换所有行的选中状态

toggleRowExpansion 用于可展开表格与树形表格，切换某一行的 row, expanded 展开状态，如果使用了第二个参数，则是设置 这一行展开与否（expanded 为 true 则展开）

clearSort 用于清空排序条件，数据会恢复成未排序的状态

Table Slot name 说明

start 插入表格第一列，一般用于多选列或展开列

end 插入表格最后一列，一般用于操作列

// 表格列属性 columns Attributes

参数 说明 类型 可选值 默认值

label 显示的标题 String

prop 对应列内容的字段名 String

width 对应列的宽度 String

minWidth 对应列的最小宽度 String

fixed 列是否固定在左侧或者右侧， String, boolean true, left, right true 表示固定在左侧 sortable 对应列是否可以排序 Boolean false

tooltip 当内容过长被隐藏时显示 tooltip Boolean false style 表格内容样式 String resizable 对应列是否可以通过拖动改变宽度 boolean true align 对齐方式 String left/center/right left

headerAlign 表头对齐方式 String left/center/right left

filterType 表头过滤类型，传入即表示需要过滤 String single(单选)/multiple(多选)/daterange(日期) /monthrange(月份)/text(文本框)
filters 数据过滤的选项，数组格式，数组中的 Array[{ label, value }] 元素需要有 label 和 value 属性。

slotHeader 自定义表头，设置的值需与 Slot 的值相同 String 如 slotHeader 为'slotHeader',则 或 <template #slotHeader>

slotCell 自定义表格内容，设置的 String 值需与 Slot 的值相同 如 slotCell 为'slotCell',则 参数{ row }

4、表格列设置组件

表格右上角设置功能单独使用 dragList

参数 listConf 表格表头数据即表格组件中 columns 数据

保存事件 save 返回最新表格表头数据

（组件用法详见 App.vue）

6、新 SearchBar 组件

6.1 使用示例

<template>
  <div>
    <!--高级筛选组件-->
    <sy-newsearchbar
      ref="syNewSearchBar"
      :placeholder="placeholder"
      :savedCondition="savedCondition"
      @searchTable="searchTable"
      @clearTags="clearTags"
      @saveScreeningCriteria="saveScreeningCriteria"
      @selectChange="selectChange"
      @deleteItem="deleteItem"
    >
      <!-- 用于主页面按钮展示的插槽 -->
      <slot name="listButtons" slot="listBtns"></slot>
      <!-- 用于展示输入框中的后缀图标的插槽-->
      <span slot="filtrateConditions">
        <el-button class="el-input__icon el-icon-menu" type="text"></el-button>
      </span>
      <ul>
        <li class="filter-item" v-for="(item, idx) in filterItems" :style="{ lineHeight: '48px' }" :key="item.name" :class="{ h40: item.isShrink }">
          <ul>
            <li class="item-title" :style="{ lineHeight: '48px' }">{{ item.name }}</li>
            <li class="item-list" style="width: calc(100% - 50px);">
              <ul>
                <!-- 申请时间选项，单独处理 -->
                <li v-if="idx === 1">
                  <el-date-picker
                    v-model.trim="timeVal"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00', '23:59:59']"
                    prefix-icon="el-icon-date"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="handleTimePicker"
                  >
                  </el-date-picker>
                </li>
                <li
                  v-for="(listItem, index) in item.itemList"
                  :key="listItem.id"
                  @click="
                                      clickItemHandle(
                                          item.id,
                                          listItem.id,
                                          item,
                                          listItem,
                                          index
                                      )
                                  "
                  :class="{
                                      isActive: listItem.isActive
                                          ? '#4A8DF0'
                                          : ''
                                  }"
                >
                  {{ listItem.name }}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </sy-newsearchbar>
    <!--插入按钮的插槽 -->
    <slot name="listBtns"></slot>
  </div>
</template>
<script>
  export default {
    name: 'syNewsearchbar',
    data() {
      return {
        tagList: [],
        savedCondition: [], // 保存的搜索条件
        timeVal: '',
        filterItems: [
          {
            id: '1',
            name: '状态',
            itemList: [
              {
                id: 5,
                name: '未开审核',
                isActive: false
              },
              {
                id: 0,
                name: '待审',
                isActive: false
              },
              {
                id: 1,
                name: '审核通过',
                isActive: false
              },
              {
                id: 2,
                name: '审核不通过',
                isActive: false
              },
              {
                id: 3,
                name: '已撤销',
                isActive: false
              },
              {
                id: 4,
                name: '已作废',
                isActive: false
              }
            ],
            isShrink: false,
            height: 40
          },
          {
            id: '2',
            name: '申请时间',
            itemList: [
              {
                id: '2',
                name: '',
                isActive: false
              }
            ],
            isShrink: false,
            height: 40
          }
        ]
      }
    },
    props: {
      placeholder: {
        type: String,
        default: '请输入单号'
      }
    },
    async created() {
      await this.searchTables()
      this.$emit('tableSearchHeightChange', 200)
      this.getSavedCondition()
    },
    methods: {
      // 获取保存的搜索条件
      getSavedCondition() {
        // 特别要注意，这个本地缓存的’key‘('apportionCalculateCriteria')要根据具体的文件名来命名，不能重复，突然筛选条件会被覆盖
        if (localStorage.getItem('apportionCalculateCriteria')) {
          // 如果保存了搜索条件
          this.savedCondition = JSON.parse(localStorage.getItem('apportionCalculateCriteria'))
        } else {
          this.savedCondition = []
        }
      },
      // 保存的筛选条件
      saveScreeningCriteria(keyField) {
        this.updateTagList()
        let tagList = JSON.parse(JSON.stringify(this.tagList))
        let filterItems = JSON.parse(JSON.stringify(this.filterItems))
        let timeVal = JSON.parse(JSON.stringify(this.timeVal))
        let keyword = JSON.parse(JSON.stringify(keyField))
        let len = this.savedCondition.filter(item => item.label === '搜索条件' + Number(this.savedCondition.length + 1)).length
        let obj = {
          label: len > 0 ? '搜索条件' + Number(this.savedCondition.length + 2) : '搜索条件' + Number(this.savedCondition.length + 1),
          value: this.savedCondition.length + 1,
          content: {
            tagList: tagList,
            filterItems: filterItems,
            timeVal: timeVal,
            keyword: keyword
          }
        }
        this.savedCondition.push(obj)
        this.$message.success(obj.label + '保存成功')
        localStorage.setItem('apportionCalculateCriteria', JSON.stringify(this.savedCondition))
      },
      // 选择保存的搜索条件
      selectChange(ids) {
        this.savedCondition.forEach(item => {
          if (item.value == ids) {
            this.filterItems = JSON.parse(JSON.stringify(item.content.filterItems))
            this.tagList = JSON.parse(JSON.stringify(item.content.tagList))
            this.timeVal = JSON.parse(JSON.stringify(item.content.timeVal))
            this.$nextTick(() => {
              this.$refs.syNewsearchbar.keyword = JSON.parse(JSON.stringify(item.content.keyword))
            })
          }
        })
      },
      // 搜索条件
      searchTables(keyWord) {
        this.updateTagList()
        this.$emit('filter', this.tagList, keyWord)
      },
      updateTagList() {
        let tags = []
        this.filterItems.forEach(item => {
          item.itemList.forEach((sub, index) => {
            if (sub.isActive) {
              tags.push(this.createTag(item, sub, index))
            }
          })
        })
        // 如果是自己选择的时间段
        let timeVal = this.timeVal
        tags.forEach(sub => {
          if (sub.pId === '2' && timeVal && timeVal.length) {
            sub.name = timeVal[0] + '至' + timeVal[1]
            sub.id = '2'
          }
        })
        this.tagList = tags
      },
      // 搜索表格
      searchTable(keyWord) {
        this.searchTables(keyWord)
      },
      // 收起展开过滤选项
      shrinkFilterItem(itemId) {
        let item = this.filterItems.find(item => item.id === itemId)
        item.isShrink = !item.isShrink
      },
      // 创建tag
      createTag(item, listItem, index) {
        let { name: pName, id: pId, value, key } = item
        let tagObj = {}
        if (pId === '2') {
          tagObj = Object.assign({
            pName,
            pId,
            timeArr: this.timeVal,
            ...listItem
          })
        } else {
          tagObj = Object.assign({
            pName,
            pId,
            ...listItem
          })
        }
        return tagObj
      },
      // 点击过滤选项(单选)
      clickItemHandle(itemId, listItemId, item, listItem, index) {
        let activeIndex = item.itemList.findIndex(item => item.isActive)
        if (activeIndex > -1 && activeIndex !== index) {
          item.itemList[activeIndex].isActive = false
        }
        this.$set(listItem, 'isActive', true)
      },
      // 清空过滤选项
      clearTags() {
        this.filterItems.forEach(item => {
          item.itemList.forEach(sub => {
            this.$set(sub, 'isActive', false)
          })
        })
        this.$nextTick(() => {
          this.$refs.syNewsearchbar.choosedCondition = ''
          this.$refs.syNewsearchbar.keyword = ''
          this.timeVal = ''
          this.searchTables('')
        })
      },
      deleteItem(index) {
        this.$nextTick(() => {
          this.$refs.syNewsearchbar.choosedCondition = ''
          this.$refs.syNewsearchbar.keyword = ''
        })
        this.savedCondition.splice(index, 1)
        localStorage.setItem('apportionCalculateCriteria', JSON.stringify(this.savedCondition))
        this.filterItems.forEach(item => {
          item.itemList.forEach(sub => {
            this.$set(sub, 'isActive', false)
          })
        })
        this.tagList = []
      },
      // 选择所属账期时间
      handleTimePicker(value) {
        if (!this.timeVal) {
          this.filterItems.forEach(ele => {
            if (ele.id === '2') {
              ele.itemList[0].isActive = false
              ele.itemList = ele.itemList.map(item => {
                return item
              })
            }
          })
        } else {
          this.filterItems.forEach(ele => {
            if (ele.id === '2') {
              ele.itemList[0].isActive = true
              ele.itemList = ele.itemList.map(item => {
                return item
              })
            }
          })
        }
      }
    }
  }
</script>

5.2 使用示例属性和方法

参数 说明 类型 默认值 placeholder 查询输入框的水印提示 String '输入' savedCondition 高级筛选保存的筛选条件列表 Array [] searchTable 查询列表数据方法 Function(keyWord) clearTags 清空筛选条件查询列表数据方法 Function() saveScreeningCriteria 保存筛选条件方法 Function(keyWord) selectChange 选择筛选条件方法 Function(ids) deleteItem 删除筛选条件方法 Function(index) 特别要注意，这个本地缓存的 localStorage.getItem('apportionCalculateCriteria')的’key‘('apportionCalculateCriteria')要根据具体的文件名来命名，不能重复，突然筛选条件会被覆盖 用于主页面按钮展示的插槽