SuitTableV2表格

说明

1、基于申铁最新的UI需求，在SuitTable的基础上，形成了SuitTableV2。 2、SuitTable版本的所有属性和事件，本版本都支持。 3、以下只列出相对于SuitTable版本上不存在的属性/事件等，即本版本增加的属性等。

使用

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

<script>

export default {
  name: 'Test',
  components: {
  },
  data() {
    return {
	  columns: [
		{
          text: '标段',
          value: 'tendersName',
          align: 'center'
        },
        {
          text: '工点',
          value: 'workPointName'
        },
        {
          text: '名称',
          value: 'name'
        },
        {
          text: '批次',
          value: 'batches'
        },
         {
          text: '状态',
          type: 'switch',
          activeText: '启用',
          inactiveText: '禁用',
          activeValue: true,
          inactiveValue: false,
          model: 'enabled',
          change: this.changeStatus
        },
		    {
		    text: '操作',
        type: 'fixedButton',
        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 [
         {
             title: '查看',
             value: '查看',
             click: this.seeDetail
         },
         {
             title: '删除',
             titleStyle: {
              color: 'red',
              width: '40px'
             },
             style: {
              color: 'red'
             },
             value: '删除',
             click: this.deleteData
          }
        ]
	  },
      changeStatus() {},
      seeDetail() {},
      deleteData() {}
	}
}
</script>

Expand Copy Copy

参数说明

columns 增加属性

属性	描述	类型	可选值	默认值
type	操作栏增加两个type: 'fixedIconButton' / 'fixedButton '	string	—	—

columns.list 属性

属性	描述	类型	可选值	默认值
title	针对操作栏，悬浮文字	string	—	—
titleStyle	针对操作栏，悬浮文字的样式	Object	—	—
style	针对操作栏，显示的文字样式	Object	—	—

源码及综合示例参考

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