dc-search-table

如何使用

确保安装好elementUI

npm install element-ui --save

确保安装好axios

npm install axios --save

安装

先切回到公司内部npm源

nrm use dc

Windows系统安装

npm install dc-search-table --save

Mac系统安装

sudo npm install dc-search-table --save

更新

npm install dc-search-table@latest

组件列表

dc-search-table [表单+表格+页码]搜索表格组件
dc-form [表单]表单组件，可单独使用
dc-table [表格]表格组件，可单独使用

引用

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
import SearchTable from 'dc-search-table'
import 'dc-search-table/npm/css/main.css'
Vue.use(SearchTable, {
  token: {
    name: 'dc-access-token',
    value: '',
    headers: '',
    storage: 'LocalStorage' // 存储方式：Cookies/LocalStorage/SessionStorage, 默认是SessionStorage
  }
});

[page].vue

<template>
  <div class="demo">
    <search-table 
      :option="option"
      v-model="formData" 
      ref="SearchTable"
      @on-operation="handleOperation"
      @request-done="requestDone"
      @request-error="requestError"
    >
    </search-table>
  </div>
</template>
<script>
import option from './option';
export default {
  name: 'demo',
  // components: { SearchTable },
  data() {
    return {
      // ...option,
      option: option.data.call(this),
      formData: {}
    };
  },
  methods: {
    // 请求结束
    requestDone() {
      // let iframeHeight = document.getElementsByClassName('search-table')[0].offsetHeight;
      // this.$framework.messager.init(null, res => {
      //   console.log(res.event, res.data);
      // });
    },
    // 表格最后一列的操作
    handleOperation({ value }, ...arg) {
      if (value === 'handle') {
        this.handle(...arg);
      }
    },
    handle(...arg) {
      console.log(...arg);
    },
    // 请求错误，如token过期
    requestError(res){
      if(res.resultCode===1030102){
        this.$router.push('/login')
      }
    }
  }
};
</script>

使用示例

【与[page].vue同级建立option.js文件】

// let proxyPrefix = process.env.NODE_ENV === 'development' ? 'api' : '';
import baseUrl from '@/services/http/apiRoot.js';
import permission from './permission';
let proxyPrefix = baseUrl;
export default {
  data() {
    return {
      permission: permission.data.call(this),
      request: {
        url: proxyPrefix + '/student/web/student/enroll/list',
        method: 'get', //非必填
        paramMap: { //非必填
          index: 'pageIndex',
          size: 'pageSize'
        },
        paramInit: {}, // 初始值, 对象或者function
        // paramInit: ()=>{
        //   return {
        //     a:1
        //   }
        // }
        page:{
          index: 0, //选填，若后端index是0开始的得调整
          size: 10 //非必填
        },
        resultMap: { //非必填
          total: 'total',
          data: 'pageData'
        }
      },
      formItemSize: '',  // medium/mini/small, 默认medium
      labelWidth: 90,
      submitBtn: true, // 搜索按钮，默认true，非必填
      submitText: '查询', // 搜索按钮的文字，默认查询，非必填
      clearBtn: true, // 重置按钮，默认true
      clearSize: 'small', // medium/mini/small, 默认medium
      clearText: '重置', // 重置按钮的文字，默认重置，非必填
      tabs:  // 顶部选项卡
        {
          label: '审核状态',
          prop: 'authorityStatus',
          dicUrl: proxyPrefix + '/health/admin/user/getAuthorityCount', // 非必填项
          list: [
            {
              label: '待审核',
              value: 2,
              number: 2 //显示数量
            },
            {
              label: '已通过',
              value: 1,
              name: 'pass',
              number: 0 //可通过调接口映射
            },
            {
              label: '未通过',
              value: 3
              name: 'fail',
              number: 0
            }
          ]
      },
      buttons: {  // 搜索顶部按钮
        placement: 'top',
        isSink: true, //是否下沉
        size: 'small',
        list: [
          {
            label: '导出',
            value: 'click',
            type: 'primary', // success,info,warning,danger
            style: 'plain',
            icon: 'el-icon-delete',
            callback: function() {
              console.log(this);
            }
          }
        ]
      },
      columns: [
        {
          slotType: 'selection',
          buttons: [
            {
              label: '批量删除',
              value: 'click',
              type: 'danger',
              style: 'plain',
              icon: 'el-icon-delete',
              callback: function() {
                //
              }
            }
          ]
        },
        {
          props: ['name', 'auditor', 'telephone'], // 根据下面属性就行自动筛选
          searchType: 'input-with-select',
          hide: true,
          canSearch: true
        },
        {
          prop: 'headPicFileName',
          label: '头像',
          slotType: 'avatar',
          width: 61
        },
        {
          prop: 'keyword',
          label: '学员/家长',
          canSearch: true, // searchType不写默认为input类型
          hide: true
        },
        {
          prop: 'name',
          label: '学员'
        },
        {
          prop: 'telephone',
          label: '家长手机号',
          width: 130
        },
        {
          prop: 'sheng',
          param: 'id',
          label: '省市区',
          isLazyload: true,
          showAllValues: true,
          searchType: 'cascader',
          dicUrl: proxyPrefix + '/health/admin/check/getArea',
          dicMethod: 'post',
          dicLevel: 3,
          dicMap: {
            label: 'name',
            value: 'code'
          },
          canSearch: true
        },
        {
          prop: 'departments',
          param: 'deptId',
          label: '科室',
          canSearch: true,
          searchType: 'cascader',
          dicUrl: proxyPrefix + '/health/admin/check/getDepts',
          dicMethod: 'post',
          dicData: [],
          dicMap: {
            label: 'name',
            value: 'id'
          }
        },
        {
          prop: 'type',
          label: '报名类型',
          minWidth: 90, // 注意与width的区别
          canSearch: true,
          searchType: 'select',
          slotType: 'text',
          slotArray: [{
            label: '新报',
            value: 1
          },
          {
            label: '续报',
            value: 2
          }],
          // 当上属性与下属性相同时，下方可省略
          // dicData: [{
          //   label: '新报',
          //   value: 1
          // },
          // {
          //   label: '续报',
          //   value: 2
          // }]
        },
        {
          prop: 'auditor',
          label: '报名老师',
          canSearch: true,
          param: 'teacherId', // 修正请求参数名
          searchType: 'select',
          dicUrl: proxyPrefix + '/org/web/org/user/list/teacher',
          dicMap: {
            label: 'userName',
            value: 'id'
          },
          dicData: [], 
          dicInit: [ // 初始值
            {label: '不限', value:0}
          ]
        },
        {
          prop: 'courseFee',
          label: '缴费金额',
          // showWordLimit: true,
          // showOverflowTooltip: true,
          slotType: 'format',
          slotRender: (row)=>{
            if(row.status===1){
              return row.courseFee + '元'
            }else{
              return row.courseFee + '美金'
            }
          }
        },
        {
          prop: 'profCheckTime',
          label: '审核时间',
          param: 'startTime,endTime',
          searchType: 'daterange',
          // format: 'yyyy年MM月dd日,hh点mm分',
          // valueFormat: 'timestamp',
          canSearch: true,
          width: 195,
          slotType: 'format',
          slotRender: dt => {
            if (dt.authorityStatus == 1 && dt.profCheckTime) {
              // 已通过
              return dt.profCheckTime;
            } else if (dt.authorityStatus == 2 && dt.profSubmitTime) {
              // 待审核
              return dt.profSubmitTime;
            } else {
              return '';
            }
          }
        },
        {
          prop: 'status',
          label: '报名状态',
          slotType: 'tag',
          width: 110,
          slotArray: [{
            type: 'warning',
            label: '待审核',
            value: 1
          },
          {
            type: 'danger',
            label: '审核不通过',
            value: 3
          },
          {
            type: 'success',
            label: '审核通过',
            value: 2
          }]
        },
        {
          prop: 'operation',
          label: '操作',
          width: 80,
          slotType: 'operation',
          slotArray: [
            {
              label: '方法一',
              value: 'handle'// 监听on-operation方法
            },
            {
              label: '方法二',
              value: 'handle2',
              filter: ({status}) => { //显示条件
                return status === 1
              },
              callback: function(callback, row){
                console.log('这里注意不要使用箭头函数',this)
              }
            }
          ]
        }
      ]
    }
  }
}

【与option.js同级建立permission.js文件】

import baseUrl from '@/http/apiRoot.js';
let telephone = router.app.$route.query.telephone;
let proxyPrefix = baseUrl;
let onlineHospitalService = 'online-hospital';
export default {
  data() {
    return {
      // 更改
      update: {
        url: proxyPrefix + onlineHospitalService + '/doctor/doctor/saveOrUpdate',
        method: 'post', // 非必填
        paramInit: function() {
          return {
            telephone: this.$route.query.telephone
          };
        }, // 初始值
        resultMap: {
          // 非必填
          total: 'total',
          data: 'pageData'
        }
      },
      insert: {
        url: proxyPrefix + onlineHospitalService + '/doctor/doctor/onlineRegisterStatus/' + telephone,
        method: 'get', // 非必填
        headers: {
          isJson: true
        },
        paramInit: function() {
          return {
            // id: 881976,
            telephone: this.$route.query.telephone
          };
        }, // 初始值
        resultMap: {
          // 非必填
          data: 'doctor'
        },
        callback(res) {}
      },
      detail: {
        url: function() {
          return proxyPrefix + onlineHospitalService + '/doctor/doctor/onlineRegisterStatus/' + this.$route.query.telephone;
        },
        method: 'get', // 非必填
        headers: {
          isJson: true
        },
        paramInit: function() {
          return {
            telephone: this.$route.query.telephone
          };
        }, // 初始值
        resultMap: {
          // 非必填
          data: 'doctor'
        },
        resultData: function(res){ // 当返回值为null时formData的初始化
          return {
            title: '',
            titleTag: '',
            imageInfoVO: {
              docCer: []
            }
          }
        },
        callback(res) {}
      }
    };
  }
};

参数说明

Variables

参数	说明	类型	可选值	默认值
options	组件配置属性，详情见下面options属性	Object	-	-

Events

事件名	说明	参数
on-search	点击搜索后触发该事件，非必填	-
on-page	切换页面时触发该事件，非必填	-
on-selection	当选择项发生变化时会触发该事件，非必填	-
on-select	当搜索选择列表发生变化时会触发该事件，非必填	-
on-clear	重置时，触发该事件，非必填，常用于自己写组件	-
on-operation	当"操作"(包括'switch-change')发生变化时会触发该事件	属性slotArray[{value}]
request-done	请求结束触发该事件，非必填	-
request-error	请求接口错误时,触发该事件，非必填,常用户token失效跳登录页面	-

Methods [this.$refs.SearchTable]

方法名	说明	参数
setOptionData	获取select选项数据接口后塞入的字段	{result: res.data,label: 'name',value: 'id',target: 'courseName'}
getTableData	重新请求该页面事件	-
setTabsData	通过接口获取tabs各选项的number值后塞入的字段	{result: res.data}

Data [this.$refs.SearchTable]

常用值	说明
searchData	请求的参数
formData	表单的参数
tableData	表格的参数

Options Attributes

参数	说明	类型	可选值/例子	默认值
request.url	请求地址，必填项	String	/student/web/audition/list	-
request.method	请求方法，可不填	String	get/post	get
request.headers	请求头，可不填	Object	{isJson: false}	{isJson: true}
request.paramMap.index	请求映射index参数	String	pageIndex	pageIndex
request.paramMap.size	请求映射size参数	String	pageSize	pageSize
request.paramInit	请求初始化参数	Object/Function	{} / ()=>{ return {a:1}}	{}
request.resultMap.total	请求映射total参数	String	total	total
request.resultMap.data	请求映射data参数	String	pageData	pageData
request.params	初始参数值	String	-	-
dialogWidth	弹窗宽度	Number	-	600
formItemSize	表单组件的大小	String	medium/mini/small	mini
labelWidth	label的宽度	Number	-	70
submitBtn	是否显示搜索按钮	Boolean	true/false	true
submitText	搜索文本	String	-	查询
clearBtn	是否显示清空按钮	Boolean	true/false	true
clearText	清空文本	String	-	重置
tabs	选项卡配置属性，详情见下方Tabs属性	Object	-	[ ]
columns	表格配置属性，详情见下面Columns属性	Array	-	[ ]
buttons	顶部按钮配置属性，详情见下面Buttons属性	Object	-	[ ]

Tabs Attributes

参数	说明	类型	可选值	默认值
prop	字段参数	String	-	-
canSearch	字段参数是否参与请求	Boolean	-	true
list	tab列表	Array	Array:object[{label,value,number}]	true

Buttons Attributes

参数	说明	类型	可选值	默认值
placement	按钮摆放的位置	String	top/bottom	top
isSink	是否下层，当搜索右边有大量位置时，顶部的按钮因为美观会选择下沉位置	Boolean	true/false	false
size	按钮大小	String	medium/mini/small	mini
list	按钮列表	Array	Array[Object]:[{label,value，type，style，icon，callback}]	false

Columns Attributes

参数	说明	类型	可选值	默认值
prop	字段参数	String	-	-
param	当请求参数与字段不同时，可用该参数修正，多参用逗号隔开，非必填	String	'beginTime,endTime'/'teacherId'	-
width	th 宽度，非必填	String	-	-
labelWidth	label宽度，非必填	String	-	-
hideSearchLabel	全部隐藏搜索的label，非必填	Boolean	true/false	false
minWidth	对应列的最小宽度，minWidth会把剩余宽度按比例分配给设置了minWidth的列，非必填	String	-	-
imageWidth	图片宽度，非必填, 当slotType='image'时生效	Number	-	100
imageHeight	图片高度，非必填, 当slotType='image'时生效	Number	-	50
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧，非必填	string, boolean	true, left, right	—
format	type=daterange时，'yyyy 年 MM 月 dd 日'	String	yyyy 年 MM 月 dd 日	-
valueFormat	type=daterange时，值的显示格式	String	timestamp	timestamp
label	字段名称	String	-	-
searchLabel	搜索字段名称，若不想要搜索名称，请赋值" ", 注意双引号内是空格，非必填	String	-	" "
hide	隐藏字段，仅搜索表单显示，表格不显示的字段	Boolean	-	-
filter	根据tab条件，是否显示，接收的参数是this	Boolean	-	this
event	触发事件，如click	String	click	-
callback	event事件的回调	Function	-	-
cansSearch	是否是搜索字段	Boolean	true/false	-
searchType	搜索表单组件类型, 当canSearch=true时才有效	String	tabs/select/input/daterange/cascader/input-with-select	input
dicData	select选项的值	Array	[{label:'',value:''}]	[]
dicUrl	select选项的请求地址	String	-	-
dicLevel	select显示几级，例如省市区为3级，则为3	String	2/3	2
dicMap.label	label字段映射	String	-	-
dicMap.value	value字段映射	String	-	-
dicMap.other	当映射的值不止一个时，字符串值时，为label值的参数，对象为多参数	String/Objecy	-	-
slot	table字段是否使用插槽	Boolean	true/false	false
slotType	table插槽类型	String	selection/tag/image/avatar/text/button	-
slotArray	表格插槽显示字段的各种值，详情见下面SlotArray属性,注意callback的this指向	Array[Object]	-	-
slotFilter	表格插槽显示的条件	Function[Object]	({roles}) => {roles!==1}	-
searchRight	表格头部(搜索)右侧内容插槽显示字段的各种值	Array[Object]	[{type:'',label:'',value:'',filter:({s})=>{}}]	-

SlotArray Attributes

参数	说明	类型	可选值	默认值
type	类型	String	info/primary/success/warning/danger	primary
label	显示文本	String	-	-
value	值	Any	-	-
filter	显示条件	Function	filter: ({ status }) => {return status != 1}	-
append	显示在文本之后的字段	Function	({successCount})=>{return `<br/>成功${successCount}条`;}	-
preppend	显示在文本之前的字段	Function	同上	-

Scoped Slot

默认插槽, 用以处理复杂字段和场景

参数	说明
列的名称	列自定义列的内容，参数为{row,label,dic,$index}
searchTop	表格头部(搜索)上侧内容
searchBottom	表格头部(搜索)下侧内容
search-列的名称	表格头部(搜索)的插槽，searchSlot:true, this.$refs.SearchTable.searchData[列的名称]='值'设置请求参数
detail-列的名称	详情页面的插槽，slot: true, this.$refs.SearchTable.formData[列的名称]='值'设置请求参数

版本升级

[0.0.0] 项目初始化
[0.0.1] 文档编写
[0.0.2] 组件编写迁移
[0.0.3] 增加setTabsData方法
[0.0.4] 组件样式的生效引入
[0.0.5] loading效果优化
[0.0.6] 封装了省市区接口搜索，增加dicLevel参数
[0.0.7] 添加request.paramInit参数, 可以初始化参数与搜索字段进行合并
[0.0.8] 修改this的指向值为上级$parent
[0.0.13] 修改样式所属
[0.0.17] 解决正则表达式影响打包问题兼容safari浏览器问题
[0.0.21] 增加是否显示字段filter参数
[0.0.22] 增加tabs请求完成标识
[0.0.24] 增加tabs返回结果的处理resultFormat
[0.0.25] 保存route信息
[0.0.26] 添加request.paramInit参数的类型为function
[0.0.27] 增加el-table-column的fixed属性
[1.0.0] 版本升级重构组件的按需加载方式结构改动较大
[1.0.68] 在request.headers增加hideLoading字段隐藏loading
[1.0.72] 增加hideSearchLabel字段全部隐藏SearchLabel

dc-search-table

dc-search-table

如何使用

安装

更新

组件列表

引用

使用示例

【与[page].vue同级建立option.js文件】

【与option.js同级建立permission.js文件】

参数说明

Variables

Events

Methods [this.$refs.SearchTable]

Data [this.$refs.SearchTable]

Options Attributes

Tabs Attributes

Buttons Attributes

Columns Attributes

SlotArray Attributes

Scoped Slot

默认插槽, 用以处理复杂字段和场景

版本升级

更多内容，请参考官网

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

dc-search-table

dc-search-table

如何使用

安装

更新

组件列表

引用

使用示例

【与[page].vue同级建立option.js文件】

【与option.js同级建立permission.js文件】

参数说明

Variables

Events

Methods [this.$refs.SearchTable]

Data [this.$refs.SearchTable]

Options Attributes

Tabs Attributes

Buttons Attributes

Columns Attributes

SlotArray Attributes

Scoped Slot

默认插槽, 用以处理复杂字段和场景

版本升级

更多内容，请参考官网

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads