ThColumnSelect列表工具

列表工具，包括控制字段显示隐藏(支持本地缓存，下次打开页面时同步)，列表数据导出，列表数据打印功能，组件需要根据固定格式传入数据源和显示规则，具体用法见下面显示

依赖说明

该组件依赖 print-js

基本使用

<!-html->
<th-column-select :print-data="dataSource" :col-data="colData" title="数据表" />

//js
data() {
    return {
        colData: {
            materialName: { istrue: true, title: '广告名称' },
            startTime: { istrue: true, title: '开始时间' },
            endTime: { istrue: true, title: '结束时间' },
            materialTypeEnum: { istrue: true, title: '广告类型' }
        },
        colData2: [
          {
            width: '',
            title: '',
            prop: '',
            istrue: true
          }
        ]
    }
},

效果演示

Api

base

参数	说明	类型	默认值	可选值
colData	数据模板,默认使用对象,在高级搜索中需使用数组	Object/Array	{}	--
fileName	导出文件名称	String	数据表	--
printData	数据源，根据colData中的规则设定导出和打印的数据	Array	[]	--
storage	是否开启缓存，开启后列表选择展示的列信息将被存放在本地	Boolean	true	false
contain	显示指定功能 filter-过滤列,export-导出,print-打印	String	filter,export,print	filter,export,print
noExportAll	不导出全部	boolean	false	--
enableWidth	开启宽度配置	boolean	false	--
enableDrag	开启拖拽排序配置,注意数据格式需为数组对象的格式,不能是对象的了	boolean	false	--

colData

- 注意: 在高级搜索中colData为自动动态绑定的,如果需要对指定数据增加属性,在methods中增加一个searchColumnChange函数包装一下即可
- 示例: searchColumnChange(data) {
    data.forEach(v => {  if(v.prop === 'img') { v.noJoinPrint = true } })
    this.colData = data
  }

参数	说明	类型	默认值	可选值
key	对象key值(colData为对象类型时对象key)	String	--	--
prop	colData为数组类型时数据的key	String	--	--
istrue	是否显示/参与打印/导出	Boolean	true	false
title	标题	String	--	--
fixed	固定列方式	String	--	left right ''
noJoinPrint	不参与打印和导出	Boolean	false	true
columnSize	打印列宽	Number	1	--

Events

事件名	说明	参数
col	label选择和宽度改变时触发	--