wextendpack3

组件库帮助手册

重要版本更新说明

表格组件: g-table

封装了element plus table组件且自带分页；支持跨页多选（通过设置tableOption.attrs.multiSelectKey开启），通过select事件返回选择的行数据。

props

showIndex

使用描述：来控制序号列是否显示， 也支持tableOption.showIndex, 只要一个为true即可显示序号列

值类型： Boolean

默认值： true

indexColAttrs

使用描述：序号列属性设置同Table-column属性，通过v-bind绑定给序号列，支持tableOption.indexColAttrs，并且tableOption.indexColAttrs优先级高于indexColAttrs

值类型： Object

默认值：

{
  align: 'center',
  width: 80,
  label: '序号'
}

showActions

使用描述：来控制操作列是否显示， 也支持tableOption.showActions, 只要一个为true即可显示

值类型： Boolean

默认值： false

pageAttrs

使用描述：分页组件属性，通过v-bind绑定给分页组件

actionColAttrs

使用描述：操作列属性设置同Table-column属性，通过v-bind绑定给序号列，支持tableOption.actionColAttrs，并且tableOption.actionColAttrs优先级高于actionColAttrs

值类型： Object

默认值：

{
  fixed: 'right',
  align: 'center',
  minWidth: 250,
  label: '操作'
}

fieldOption

使用描述：来控制字段名和别名的key

值类型：Object

默认值：{ label: 'label', name: 'name' }

tableOption

描述：表格配置

值类型：Object

    
    {
      showActions: false,
      // 判断是否显示'操作'列, 操作列插槽名称为actions
      showPage: true, // 用于判断是否是否使用g-table中封装的pagination组件，默认为true
      // totalCount：0,         // 即将弃用， pageAttrs中设置。记录数据总数，totalCount大于选择的pagezie时显示分页组件
      // pagesizes: [],         // 即将弃用， pageAttrs中设置。 分页显示数据量设置，默认[10, 20, 30, 40]
      // pagesize: 0,           // 即将弃用， pageAttrs中设置。 每页数据量，默认为10
      pageAttrs: {
        // 分页组件的配置属性
        total: 0,
        pagesizes: [10, 20, 30, 40, 50],
        pagesize: 10
      },
      // 事件绑定
      listeners: {
        'current-change': (row) => {
        }
      },
      // 这里的属性会通过v-bind绑定到v-table上
      attrs: {
         'highlight-current-row': true, // el-table原始属性，用于开启行选中并可触发current-change事件
         multiSelectKey: 'id' // 扩展属性，支持跨页多选
      },
      // 字段配置（关键属性），配置在下方单独进行说明
      columns: []
    }
    
  

tableData

描述：表格数据

值类型：数组

tableOption.columns配置

    
tableOption.columns = [
  {
    label: '编号',
    name: 'bh',
    hidden: true， // 用于设置字段是否显示
    // 通过v-bind将attrs中的属性赋值给el-table-column
    attrs: {
       align: 'left'
    },
    slot: 'chacao' // 支持插槽，名字和name可以不同，具体使用情况下方使用样例（2）
    // 支持属性值颜色设置,  通过getColor函数改变属性值span标签字体的颜色
    getColor: (val) => {
         let options = {
            a: '#dc1111',
            b: '#0ecb7f'
          }
          return options[val] || ''
        }
     }
  }
]
    
   

(1) label

用于表格显示字段别名

(2) name

字段英文名

（3）hidden 用于设置字段是否显示, 例如编号、id等这些字段是数据删除的时候需要用到，但是可以不显示

事件

(1) page-change

切换分页、切换pagesize的时候出发

（2）select

选择数据后触发

使用样例

（1）基本使用

<g-table :tableOption="tableOptions" :tableData="tableData"></g-table>

显示操作列：

<g-table :tableOption="tableOptions" :tableData="tableList.data" @page-change="handlePage($event)">
    // scope为 { $index: xxx, row: xxx } $index是当前行索引，row是当前行数据
    <template v-slot:actions="scope">
        <el-button>test</el-button>
    </template>
</g-table>

（2）插槽

// js
tableOption.columns = [
  {
    label: '插槽',
    name: 'chacao',
    attrs: {
      align: 'left'
    },
    slot: 'chacao' // 名字和name可以不同
  }
]
// html
 <g-table :tableOption="tableOptions" :tableData="tableList.data">
   <template v-slot:chacao="scope">
     <span style="text-align: center;border: 1px solid #dddddd;">{{ scope.row['chacao'] }}</span>
   </template>
 </g-table>

（3）树形数据

    
// js
const tableOptions = reactive({
      showActions: true,
      // totalCount: 0, 即将弃用，改到pageAttrs.pagesize
      // pagesizes: [10, 20, 30, 40, 50], 即将弃用，改到pageAttrs.pagesizes
      // pagesize: 10, 即将弃用，改到pageAttrs.pagesize
      pageAttrs: {
        total: 0,
        pagesizes: [10, 20, 30, 40, 50],
        pagesize: 10
      },
      actionColAttrs: {
        fixed: 'right',
        align: 'center',
        minWidth: 120,
        label: '操作'
      },
      attrs: {
        'row-key': 'bh',
        'default-expand-all': true,
        border: true
      },
      columns: [
        {
          label: '编号',
          name: 'bh',
          getColor: (val) => {
            let options = {
              a: '#dc1111',
              b: '#0ecb7f'
            }
            return options[val] || ''
          }
        },
        {
          label: '插槽',
          name: 'chacao',
          attrs: {
            align: 'left'
          },
          slot: 'chacao' // 名字和name可以不同
        }
      ]
    })
    const tableList = reactive({
      data: [
        {
          bh: 'a',
          chacao: 'test',
          children: [
            {
              bh: 'd',
              chacao: '123'
            },
            {
              bh: 'e',
              chacao: '123'
            }
          ]
        },
        {
          bh: 'b',
          chacao: 'test'
        },
        {
          bh: 'c',
          chacao: 'test'
        }
      ]
    })
<g-table ref="gTable" :tableOption="tableOptions" :tableData="tableList.data">
  <template v-slot:chacao="scope">
  <span style="text-align: center;border: 1px solid #dddddd;">{{ scope.row['chacao'] }}</span>
</template>
</g-table>

   
  

效果如下：

（4）表格重置后分页组件页面设置问题

<g-table ref="gTable" :tableOption="tableOptions" :tableData="tableList.data" :show-index="false">
  ....
</g-table>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const gTable = ref(null)
    // reset table and pagination
    function handleResetTb() {
      gTable.value.resetPagination()
    }
  }
}
</script>

表单项组件： g-form-item

基于饿了么ui库form表单项组件进行封装

字段配置说明

常见字段配置

let formFields = {
  bh: {
    alias: '',         // 字段别名
    component: {       // 组件配置
      type: 'input',   // 默认type是input, 这个type是组件类型, 这个类型枚举看下方组件类型
      hidden: true,    // 隐藏不显示
      attrs: {         // 组件属性，通过v-bind和$attrs作用于子组件，这里的属性主要参考element plus的组件属性
        'input-align': 'right'
      }
    }
  },
  status: {
    alias: '状态',
    component: {
      slot: 'status' // 支持插槽
    }
  },
  // 支持枚举
  sfcjjs: {
    alias: '是否曾经积水',
    type: 'string',
    component: {
      type: 'select', // 默认
      attrs: {
        values: [
          {
            label: '是',
            value: '是'
          },
          {
            label: '否',
            value: '否'
          }
        ]
      }
    }
  },
  jcssmc: {
    alias: '监测设施名称',
    type: 'string',
    component: {
      type: 'input', // 默认
      attrs: {
        'input-align': 'right'
      },
      expression: {
        render: (form) => {
          if (form.sfyjcss && form.sfyjcss === '是') {
            return true
          } else {
            return false
          }
        }
      }
    }
  }
}

组件类型

以下类型是经过二次封装后的组件，element plus原生组件也是支持的，只要component.type直接填element plus组件名称el-xxx即可

input        ---对应element plus组件----   el-input
input-number --------------------------  el-input-number
switch       --------------------------  el-switch
date         --------------------------  el-date-picker
select       --------------------------  el-select
uploader     ----非element plus组件，但是依赖于element-----  g-file-uploader

使用样例

  <el-form ref="submitForm" :model="properties" label-width="150px" class="form-no-line-height">
    <el-row :gutter="32">
      <el-col v-for="(value, key) in usefulFields" :key="key" :span="value.component.attrs && (value.component.attrs.type === 'textarea' || value.component.type === 'uploader') ? 24 : 8">
        <template v-if="value.component.type === 'uploader'">
          <el-form-item :label="value.alias" v-bind="value.component.attrs || {}">
            <g-file-uploader ref="attchmentPanel" :attachmentData="getAttachmentDataConfigByFiledName(key)" @selectFiles="handleSelectFiles" @delete="handleDelFile"></g-file-uploader>
          </el-form-item>
        </template>
        <template v-else>
          <!--vue2.x写法<g-form-item :key="key" :label="value.alias" :class="value.alias.length < 10 ? 'short-form-item-name' : ''" :fieldKey="key" :defaultVal.sync="properties[key]" :formItem="value.component" @emit-change="formItemValChangeHandle"></g-form-item>-->
          <g-form-item :key="key" :label="value.alias" :class="value.alias.length < 10 ? 'short-form-item-name' : ''" :prop="key" v-model:defaultVal="properties[key]" :formItem="value.component" @emit-change="formItemValChangeHandle"></g-form-item>
        </template>
      </el-col>
    </el-row>
  </el-form>

说明

el-form还是需要设置:model="xxx"不然g-form-item响应有问题

事件

事件包括element plus组件支持的事件和二次封装后的事件。

（1）emit-change

上述二次封装后的组件，支持emit-change事件, input组件是变更时立刻触发，input-number是失去焦点时触发，返回参数为绑定对象修改后的键值对;

(2) 原来的change事件存在冒泡问题，因此需要进行如下处理

<g-form-item :key="key" :label="value.alias" :class="value.alias.length < 10 ? 'short-form-item-name' : ''" :prop="key"
v-model:defaultVal="properties[key]" :formItem="value.component" @emit-change="formItemValChangeHandle" @change="formItemValChangeHandle2"></g-form-item>

function formItemValChangeHandle(data, oldVal) {
  // 会返回新旧数据，并且都是键值对形式: { key: 同g-form-item中prop绑定的key, value: xxx }
}
function formItemValChangeHandle2(data, oldVal) {
  // 同element plus返回数据
}