建设管理平台

SuitTable表格

说明

1、table表格基于element-ui (opens new window)的组件进行的二次封装。
2、主要实现表格的快速生成，提高开发效率

# 使用

<template>
  <div class="app-container userDiv" style="background-color:#ffffff;">
    <suit-table :data="list" :columns="columns" class="dataTable"></suit-table>
  </div>
</template>

<script>

export default {
  name: 'Test',
  components: {
  },
  data() {
    return {
	  columns: [
		{
          text: '标段',
          value: 'tendersName'
        },
        {
          text: '工点',
          value: 'workPointName'
        },
        {
          text: '名称',
          value: 'name'
        },
        {
          text: '批次',
          value: 'batches'
        },
        {
          text: '日期',
          value: 'createDate',
          // filter: parseTime,
          filterParams: ['{y}-{m}-{d} {h}:{i}'],
          width: 150
         },
         {
          text: '状态',
          type: 'switch',
          activeText: '启用',
          inactiveText: '禁用',
          activeValue: true,
          inactiveValue: false,
          model: 'enabled',
          change: this.changeStatus
        },
		{
		  text: '操作',
          type: 'iconButton',
          list: this.operButton
		}
	  ],
	  list: []
	}
  },
  created() {
    console.log(this.$site)
      for (let i = 0; i < 10; i++) {
          this.list.push(
              {
                  tendersName: `JCXSG-${i}标`,
                  workPointName: `三张区间-${i}-总体`,
                  name: `${i}标盾构机`,
                  batches: i,
                  createDate: new Date(),
                  enabled: i % 2 === 0
              },
          )
      }
  },
  methods: {
	 operButton() {
       return [
         {
             id: 'see',
             class: 'iconyanjing',
             value: '查看',
             click: this.seeDetail
         },
         {
             id: 'del',
             class: 'iconshanchu1',
             value: '删除',
             click: this.deleteData
          }
        ]
	  },
      changeStatus() {},
      seeDetail() {},
      deleteData() {}
	}
}
</script>
Expand Copy

# 文件列处理

<template>
  <div>
     <suit-table
       :data="list"
       :columns="columns"
      ></suit-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list:[{valuationType:'施工图单位上报',docId:'58037'},{valuationType:'财务监理审核',docId:'58037'}],
      columns:[
        {
          text: '节点',
          value: 'valuationType',
          width: 150
        },
        {
          type:'doc', //新增类型doc,设置后为文档显示
          text: '文件',
          value: 'docId',//值为docId 表格内会根据docId自动请求接口拿取文档列表
          filter:(item,name)=>{ //过滤显示内容，返回两个参数 item:文档信息  name:文档名称
            return '<span>'+name+'</span>'
          },
          showDownloadBtn:false, //列表右侧下载按钮，默认为true
        }
      ]
    }
  }
}
</script>
Expand Copy

# 参数说明

# 属性

属性 描述 类型 可选值 默认值
fit 表格自适应(会根据表格数据的长度自动计算出宽度) boolean true,false false
data 表格数据 Array[] — []
columns 表格每一列数据的处理 Array[] — []
listLoading 加载条 boolean — false
loadingBackground 加载条背景颜色 string — —
border 是否带有纵向边框 boolean — true
height Table 的最大高度。合法的值为数字或者单位为 px 的高度。 string/number — —
tableHeight Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 string/number — —
showHeader 是否显示表头 boolean — true
rowkey 当前行的 key，只写属性 string — id
headColor 表头单元格的背景颜色 string — —
expandKeys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 Array[] — []
isAccordion 是否可折叠 boolean — false
isLazy 是否懒加载 boolean — false
loadFun 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 Function(row, treeNode, resolve) — —
spanMethod 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex }) — —
myCellStyle 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex}) — —
tableRowClassFun 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 Function({row, column, rowIndex, columnIndex}) — (e) => { return rowClassName${e.code} }
showSummary 是否在表尾显示合计行 boolean — false
summaryMethod 自定义的合计计算方法 Function({ columns, data }) — —
select 是否显示多选框 boolean — false
selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) — —
reserveSelection 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） boolean — false
showIndex 是否显示序列号(列) boolean — false
expand 是否显示为一个可展开的按钮 boolean — false
expandList 展开列表，仅对expand为true生效 Array[] — []
pagerCount 页码按钮的数量，当总页数超过该值时会折叠 number 大于等于 5 且小于等于 21 的奇数 7
pageNum 当前页数 number — 1
pageSize 每页显示条目个数 number — 10
pageSizes 每页显示个数选择器的选项设置 Array[] — [15, 20, 50]
total 总条目数 number — 0
showSize 是否显示sizes组件 boolean — false
showSmallPagination 是否显示小分页组件 boolean — true
showPagination 是否显示分页组件 boolean — false

# 事件

事件名称 说明 回调参数
expandChange 当用户对某一行展开或者关闭的时候会触发该事件 e
select 当用户手动勾选数据行的 Checkbox 时触发的事件 row
selectChange 当选择项发生变化时会触发该事件 e
selectAll 当用户手动勾选全选 Checkbox 时触发的事件 e
rowClick 当某一行被点击时会触发该事件 e
dbclick 当某一行被双击时会触发该事件 e
filterChange 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 filters
sortChange 当表格的排序条件发生变化的时候会触发该事件 val
rowContextmenu 当某一行被鼠标右键点击时会触发该事件 row,event
handleSizeChange pageSize 改变时会触发 val
currentChange currentPage 改变时会触发 val

# columns 属性

属性 描述 类型 可选值 默认值
type 列的类型iconButton图标按钮，button按钮，doc文档,img图片,switch开关 string — —
text 显示的标题 string — —
fixed 列是否固定在左侧或者右侧，true 表示固定在左侧 string, boolean true, left, right —
showEllipsis 当内容过长被隐藏时显示 tooltip boolean — false
filterMultiple 数据过滤的选项是否多选 boolean — true
value 对应列内容的字段名，也可以使用 property 属性 string — —
renderHeader 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — —
headFilters 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 Array[{ text, value }] — —
sortable 对应列是否可以排序 boolean — true
width 对应列的宽度 string — —
children 列的子列表 Array[] — —
render 自定义渲染函数 Function() — —
hide 当（执行）结果为真时，当前列不显示 boolean ,Function() — —
getSrc (type类型 === img)自定义图片url处理函数 Function() — —
imgHeight (type类型 === img)自定义图片高度 Function() — —
model (type类型 === switch)switch双向绑定的值独有 boolean / string / number — —
activeValue (type类型 === switch)switch 打开时的值独有 boolean / string / number — true
inactiveValue (type类型 === switch)switch 打开时的值独有 boolean / string / number — false
activeText (type类型 === switch)switch 打开时的文字描述 string — —
inactiveText (type类型 === switch) switch 关闭时的文字描述 string — —
formatter (type类型 !== 'iconButton'，并且为false时生效)格式化方法 Function(row) — —
filter (type类型 !== 'iconButton'，并且为false时生效)过滤方法 Function(row[value],...filterParams) — —
filterParams (type类型 !== 'iconButton'，并且为false时生效) 过滤参数 Array[] — —
classFun (type类型 !== 'iconButton'，并且为false时生效)自定义class内容 Function() — —
style (type类型 !== 'iconButton'，并且为false时生效)自定义style内容 string — —
list 列的按钮数据列表(iconButton图标按钮，button按钮)独有 Array[] — —

# columns 事件

事件名称 说明 回调参数
change 状态发生变化时的回调函数,type类型为switch开关独有 scope, row
click 单元格点击事件，(type类型 !== 'iconButton'，并且为false时生效) row, e

# columns.list 属性

属性 描述 类型 可选值 默认值
type 类型,columns.type === 'button'独有 primary / success / warning / danger / info / text — —
privilege 权限，columns.type === 'button'独有 string — —
value 内容值 string — —
class 自定义class，columns.type === 'iconButton'独有 string — —
style 自定义style，columns.type === 'iconButton'独有 string — —

# columns.list 事件

事件名称 说明 回调参数
click 按钮点击事件 scope, e

# 源码及综合示例参考

组件源码 (opens new window)综合示例 (opens new window)

SuitTableV2表格