@liuyi_npm/common_table

基于 element 的 基础table以及筛选项。

table

1.1.自定义label

可在columns中使用LabelExpand组件进行扩展，具体使用方法如下，column检测到有labelRender属性时会去渲染里面的jsx

  labelRender: (h, { row }) => {
    // 显示label名称 + ToolTip
    return h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }
      },
      [
        h(
          'span',
          {
            style: {
              marginRight: '10px'
            }
          },
          '运单号'
        ),
        h(
          'el-tooltip',
          {
            props: {
              effect: 'dark',
              content: '点击单号，可查到具体异常原因',
              placement: 'top'
            }
          },
          [
            h('i', {
              style: { color: '#F56C6C' },
              class: 'el-icon-warning'
            })
          ]
        )
      ]
    )
  }

1.2.自定义内容

可在columns中使用TableExpand组件进行扩展，具体使用方法如下，column检测到有render属性时会去渲染里面的jsx

render: (h, { row }) => {
  return h(
    'div',
    {
      style: {
        color: '#409EFF',
        cursor: 'pointer',
        textDecoration: 'none'
      },
      on: {
        click: () => {
          // 点击事件处理
          this.handlePreviewOrderInfo(row)
        },
        mouseenter: event => {
          event.target.style.textDecoration = 'underline'
        },
        mouseleave: event => {
          event.target.style.textDecoration = 'none'
        }
      }
    },
    row.orderNo
  )

1.3.props

| 参数名 | 含义 | 备注 | | --------- | -------------- | ---------------------- | | sortedTableList | table 列配置 | 具体可配置参数，见下表 | | columnKey | table key 值 | 具体可配置参数，见下表 | | emptyText | table 空配置 | 具体可配置参数，见下表 | | calcHeightFlag | table 是否自动计算高度 | 具体可配置参数，见下表 | | height | table 高度 | 具体可配置参数，见下表 | | handleRowClick | table 行点击方法 | 具体可配置参数，见下表 | | stickyHeader | table 是否使用sticky布局 | 具体可配置参数，见下表 |

TableFilter

2.1.props

| 参数名 | 含义 | 备注 | | --------- | -------------- | ---------------------- | | filterItems | 筛选规则 | 具体可配置参数，见下表 | | dataForm | 筛选form项 | 具体可配置参数，见下表 | | expandFlag | 是否开启两行折叠规则 | 具体可配置参数，见下表 |

注意项

可以使用customRender自定义渲染

使用case如下

  <TableFilter
    :filter-items="filterItems"
    :show-more="true"
    :data-form="dataForm"
    @search="
      pageIndex = 1
      getDataList()
    ">
    <el-form-item
      slot="departmentName"
      style="width: 190px">
      <el-popover
        ref="departmentListPopover"
        v-model="popoverVisible"
        width="200"
        placement="bottom-start">
        <el-tree
          ref="departmentTree"
          style="max-height: 500px; overflow-y: auto; width: 100%"
          :data="departmentList"
          :props="departmentTreeProps"
          node-key="id"
          :default-expand-all="true"
          :highlight-current="true"
          :expand-on-click-node="false"
          @current-change="departmentTreeCurrentChangeHandle" />
      </el-popover>
      <el-input
        v-model="dataForm.departmentName"
        v-popover:departmentListPopover
        clearable
        class="menu-list__input"
        placeholder="请选择部门"
        @input="searchDepartment"
        @clear="dataForm.departmentId = ''" />
    </el-form-item>
  </TableFilter>

  // 最好将其放到computed中使用
  filterItems() {
    const list = [
      {
        type: 'input',
        prop: 'trackNo',
        placeholder: '请输入运单号，每个单号之间请用回车键隔开！',
        attrs: {
          type: 'textarea'
        }
      },
      {
        type: 'select',
        prop: 'key',
        placeholder: '请选择人员姓名',
        options: this.userNameData,
        props: {
          label: 'name',
          value: 'id'
        },
        attrs: {
          filterable: true
        }
      },
      {
        type: 'select',
        prop: 'basicUserAlias',
        placeholder: '请选择人员别名',
        options: this.basicUserAliasNameData,
        props: {
          label: 'alias',
          value: 'id'
        },
        attrs: {
          filterable: true
        }
      },
      {
        type: 'select',
        prop: 'shareId',
        placeholder: '请选择所属公司',
        options: this.shareOptions,
        props: {
          label: 'name',
          value: 'id'
        }
      },
      {
        type: 'select',
        prop: 'isShare',
        placeholder: '请选择是否共摊',
        options: this.isShare,
        props: {
          label: 'name',
          value: 'id'
        }
      },
      {
        type: 'input',
        prop: 'departmentName',
        placeholder: '请选择部门',
        customRender: true
      },
      {
        type: 'cascader',
        prop: 'costId',
        placeholder: '请选择费用类型',
        options: this.costTypeData,
        props: this.costProps,
        attrs: {
          filterable: true
        }
      },
      {
        type: 'cascader',
        prop: 'configComId',
        placeholder: '请选择关联项目',
        options: this.configCom,
        props: this.costProps1
      },
      {
        type: 'daterange',
        prop: 'timer',
        startPlaceholder: '账单开始日期',
        endPlaceholder: '账单结束日期',
        pickerOptions: this.pickerOptions,
        valueFormat: 'yyyy-MM-dd',
        width: '300px'
      },
      // 以下是展开后显示的筛选条件
      {
        type: 'select',
        prop: 'status',
        placeholder: '请选择审批状态',
        options: [
          { label: '驳回审批', value: '0' },
          { label: '待审批', value: '1' },
          { label: '审批通过', value: '2' },
          { label: '待我审批', value: '3' },
          { label: '无需审批', value: '4' },
          { label: '审批中', value: '5' }
        ]
      },
      {
        type: 'select',
        prop: 'sendStatus',
        placeholder: '请选择付款状态',
        options: [
          { label: '未付款', value: 1 },
          { label: '已付款', value: 2 }
        ]
      },
      {
        type: 'input',
        prop: 'price',
        placeholder: '请输入金额'
      },
      {
        type: 'input',
        prop: 'description',
        placeholder: '请输入备注'
      },
      {
        type: 'select',
        prop: 'createdBy1',
        placeholder: '请选择操作人',
        options: this.userNameData,
        props: {
          label: 'name',
          value: 'id'
        },
        attrs: {
          filterable: true
        }
      },
      {
        type: 'daterange',
        prop: 'inBookTimer',
        startPlaceholder: '付款开始日期',
        endPlaceholder: '付款结束日期',
        pickerOptions: this.pickerOptions,
        valueFormat: 'yyyy-MM-dd',
        width: '300px'
      },
      {
        type: 'daterange',
        prop: 'createTimer',
        startPlaceholder: '创建开始日期',
        endPlaceholder: '创建结束日期',
        pickerOptions: this.pickerOptions,
        valueFormat: 'yyyy-MM-dd',
        width: '300px'
      }
    ]
    return list
  }