Vue3_下拉表格组件

具备功能：下拉框、表格、分页、查询

组件地址：T-ui-plus | TuiPlus基础组件文档

（@wocwin/t-ui-plus 基于 vue3 + ts + Element-plus 再次封装的基础组件）

安装：npm install @wocwin/t-ui-plus -S & pnpm add @wocwin/t-ui-plus -S

使用：// main.ts

import TuiPlus from '@wocwin/t-ui-plus'

import '@wocwin/t-ui-plus/lib/style.css'

const app = createApp(App)

app.use(TuiPlus)

app.mount('#app')

一、效果图 

二、实现代码 

          <el-col :span="11">
            <el-form-item
              label="计算公式"
              prop="designFormulaProp"
            >
              <t-select-table
                ref="selectRef"
                :table="table"
                :columns="table.columns"
                :max-height="400"
                :tableWidth="1000"
                :keywords="{ label: 'emissionFactorTypeName', value: 'id' }"
                @radio-change="radioChange"
                @page-change="pageChange"
                isShowPagination
                isShowQuery
                :opts="opts"
                @submit="conditionEnter"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

const selectRef = ref()
const getObjTable = () => {
  return {
    total: 0,
    currentPage: 1,
    pageSize: 10,
    data: [],
    columns: [
      { label: '工厂', width: '200px', prop: 'siteName' },
      { label: '计量单位', width: '149px', prop: 'unit' },
      { label: '大类', width: '149px', prop: 'fuelTypeName' },
      { label: '燃料品种', width: '149px', prop: 'fuelBrandName' },
      { label: '二氧化碳排放因子', width: '149px', prop: 'carbonEmissionFactor' },
      { label: '低位发热量(GJ/t)', width: '149px', prop: 'netCalorificValue' },
      { label: '单位热值含碳量(tC/GJ)', width: '200px', prop: 'uhvcc' },
      { label: '燃料碳氧化率', width: '200px', prop: 'fuelCarbonOxidationRate' },
      { label: '报告开始日期', width: '200px', prop: 'startTime' },
      { label: '报告结束日期', width: '200px', prop: 'endTime' }
    ]
  }
}
let table = ref(getObjTable())
let state = reactive({
  queryData: {
    // workshopNum: null,
    typeSelect: null
  },
  list: [],
  siteCode: '',
  emissionFactorTypeList: [],
  listTypeInfo: {
    sexList: [
      {
        dictLabel: '常用化石燃料相关参数',
        dictValue: '1'
      },
      {
        dictLabel: '其他排放因子',
        dictValue: '2'
      },
      {
        dictLabel: '电力',
        dictValue: '3'
      },
      {
        dictLabel: '热力',
        dictValue: '4'
      }
    ]
  }
})
const opts = computed(() => {
  return {
    // workshopNum: {
    //   label: '工厂',
    //   comp: 'el-tree-select', //树形下拉
    //   span: 2,
    //   bind: {
    //     'check-strictly': true,
    //     'default-expand-all': true,
    //     // disabled: true,
    //     data: state.list
    //   }
    // },
    typeSelect: {
      label: '类型',
      comp: 'el-select',
      type: 'select-arr',
      list: 'sexList',
      listTypeInfo: state.listTypeInfo,
      defaultVal: '1',
      span: 2
    }
  }
})

// 排放因子-计算公式(单选框) 监听
const radioChange = async (val) => {
  formDataDialog.value.designFormulas = val.id
  formDataDialog.value.emissionFactorType = val.emissionFactorType
  formDataDialog.value.unit = val.unit
}
// 获取当前的页码
const pageChange = (val) => {
  getFormTable() // 表格接口调用
}
// 下拉框表格-搜索查询
const conditionEnter = async (data) => {
  getSiteIdData.value.typeData = data.typeSelect
  const re = await getEmissionFactorList({
    emissionFactorType: getSiteIdData.value.typeData,
    pageSize: table.value.pageSize as number,
    pageNum: table.value.currentPage as number,
    siteId: formData.value.siteId
  })
  table.value.total = re.data?.total
  table.value.data = re.data?.list
  selectRef.value.blur()
}