注意:使用此组件必须:Element-plus版本2.6以上；@wocwin/t-ui-plus最新版本。

2024-04-19 TSelectTable组件动态赋值默认值回显问题解决及单选默认值修改；及新增isClearQuery属性关闭下拉框自动清除查询条件的数据

一、最终效果

二、代码示例

<t-select-table
  :table="table"
  :columns="table.columns"
  :max-height="400"
  :keywords="{ label: 'name', value: 'id' }"
  @radioChange="radioChange"
></t-select-table>

三、参数配置

1. 配置参数（Attributes）继承 el-table 及 el-select 属性

2. 事件（events）继承 el-table 及 el-select 属性

3.方法（Methods）继承 el-table 及 el-select 属性

四、具体代码

<template>
  <el-select
    ref="selectRef"
    :model-value="multiple ? state.defaultValue : selectDefaultLabel"
    popper-class="t-select-table"
    :style="{ width: selectWidth ? `${selectWidth}px` : '100%' }"
    :multiple="multiple"
    v-bind="selectAttr"
    :value-key="keywords.value"
    :filterable="filterable"
    :filter-method="filterMethod || filterMethodHandle"
    v-click-outside="closeBox"
    @visible-change="visibleChange"
    @remove-tag="removeTag"
    @clear="clear"
    @keyup="selectKeyup"
  >
    <template #empty>
      <div
        class="t-table-select__table"
        :style="{ width: tableWidth ? `${tableWidth}px` : '100%' }"
      >
        <div class="table_query_condition" v-if="isShowQuery">
          <t-query-condition
            ref="tQueryConditionRef"
            :boolEnter="false"
            @handleEvent="handleEvent"
            v-bind="$attrs"
          >
            <template v-for="(index, name) in slots" v-slot:[name]="data">
              <slot :name="name" v-bind="data"></slot>
            </template>
            <template #querybar v-if="isShowBlurBtn">
              <el-button
                v-bind="{ type: 'danger', ...btnBind }"
                @click="blur"
                >{{ btnBind.btnTxt || '关闭下拉框' }}</el-button
              >
              <slot name="querybar"></slot>
            </template>
          </t-query-condition>
        </div>
        <el-table
          ref="selectTable"
          :data="state.tableData"
          :class="{
            radioStyle: !multiple,
            highlightCurrentRow: isRadio,
            keyUpStyle: isKeyup,
          }"
          highlight-current-row
          border
          :row-key="getRowKey"
          @row-click="rowClick"
          @cell-dblclick="cellDblclick"
          @selection-change="handlesSelectionChange"
          v-bind="$attrs"
        >
          <el-table-column
            v-if="multiple"
            type="selection"
            width="55"
            align="center"
            :reserve-selection="reserveSelection"
            fixed
          ></el-table-column>
          <el-table-column
            type="radio"
            width="55"
            :label="radioTxt"
            fixed
            align="center"
            v-if="!multiple && isShowFirstColumn"
          >
            <template #default="scope">
              <el-radio
                v-model="radioVal"
                :label="scope.$index + 1"
                @click.stop="
                  radioChangeHandle($event, scope.row, scope.$index + 1)
                "
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in columns"
            :key="index + 'i'"
            :type="item.type"
            :label="item.label"
            :prop="item.prop"
            :min-width="item['min-width'] || item.minWidth"
            :width="item.width"
            :align="item.align || 'center'"
            :fixed="item.fixed"
            :show-overflow-tooltip="item.noShowTip"
            v-bind="{ ...item.bind, ...$attrs }"
          >
            <template #default="scope">
              <!-- render方式 -->
              <template v-if="item.render">
                <render-col
                  :column="item"
                  :row="scope.row"
                  :render="item.render"
                  :index="scope.$index"
                />
              </template>
              <!-- 作用域插槽 -->
              <template v-if="item.slotName">
                <slot :name="item.slotName" :scope="scope"></slot>
              </template>
              <div v-if="!item.render && !item.slotName">
                <span>{{ scope.row[item.prop] }}</span>
              </div>
            </template>
          </el-table-column>
          <slot></slot>
        </el-table>
        <div class="t-table-select__page" v-if="isShowPagination">
          <el-pagination
            v-model:current-page="table.currentPage"
            v-model:page-size="table.pageSize"
            small
            background
            @current-change="handlesCurrentChange"
            layout="total, prev, pager, next, jumper"
            :pager-count="5"
            :total="table.total"
            v-bind="$attrs"
          />
        </div>
      </div>
    </template>
  </el-select>
</template>

<script setup lang="ts" name="TSelectTable">
import TQueryCondition from '../../query-condition/src/index.vue'
import RenderCol from './renderCol.vue'
import {
  computed,
  useAttrs,
  useSlots,
  ref,
  watch,
  nextTick,
  reactive,
  onMounted,
} from 'vue'
import { ElMessage } from 'element-plus'
import ClickOutside from '../../utils/directives/click-outside/index'
const props = defineProps({
  modelValue: {
    type: [Array, String, Number, Boolean, Object],
    default: undefined,
  },
  // 选择值
  value: {
    type: [String, Number, Array],
  },
  // table所需数据
  table: {
    type: Object,
    default: () => {
      return {}
    },
  },
  // 表头数据
  columns: {
    type: Array as unknown as any[],
    default: () => [],
  },
  // 单选文案
  radioTxt: {
    type: String,
    default: '单选',
  },
  // 是否显示搜索条件
  isShowQuery: {
    type: Boolean,
    default: false,
  },
  // 是否清空搜索条件
  isClearQuery: {
    type: Boolean,
    default: false,
  },
  // 是否显示隐藏下拉框按钮
  isShowBlurBtn: {
    type: Boolean,
    default: false,
  },
  // 显示隐藏下拉框按钮属性
  btnBind: {
    type: Object,
    default: () => {
      return {
        btnTxt: '关闭下拉框',
      }
    },
  },
  // 单选框--是否开启点击整行选中
  rowClickRadio: {
    type: Boolean,
    default: true,
  },
  // 是否显示首列
  isShowFirstColumn: {
    type: Boolean,
    default: true,
  },
  // 是否过滤
  filterable: {
    type: Boolean,
    default: true,
  },
  // 是否支持翻页选中
  reserveSelection: {
    type: Boolean,
    default: true,
  },
  // 是否显示分页
  isShowPagination: {
    type: Boolean,
    default: false,
  },
  // 是否自定义过滤
  filterMethod: {
    type: Function,
  },
  // 下拉数据指向的label/value
  keywords: {
    type: Object,
    default: () => {
      return {
        label: 'label',
        value: 'value',
      }
    },
  },
  // 单选是否开启键盘事件
  isKeyup: {
    type: Boolean,
    default: false,
  },
  // 多选
  multiple: {
    type: Boolean,
    default: false,
  },
  // select 宽度
  selectWidth: {
    type: [String, Number],
    default: 550,
  },
  // table宽度
  tableWidth: {
    type: [String, Number],
    default: 550,
  },
  // 设置默认选中项--keywords.value值（单选是String, Number类型；多选时是数组）
  defaultSelectVal: {
    type: Array,
    default: () => [],
  },
})
const selectAttr = computed(() => {
  return {
    clearable: true,
    ...useAttrs(),
  }
})
// 自定义指令
const vClickOutside = ClickOutside
const slots = useSlots()
const isDefaultSelectVal = ref(true) // 是否已经重新选择了
const forbidden = ref(true) // 判断单选选中及取消选中
const isRadio = ref(false)
const isQueryVisible = ref(false) // 查询条件是否显示隐藏下拉框
const isVisible = ref(false) // 是否显示隐藏下拉框
const radioVal: any = ref('')
const selectDefaultLabel: any = ref(props.modelValue) // 单选赋值
const state: any = reactive({
  defaultSelectValue: props.defaultSelectVal, // 默认选中
  tableData: props.table.data, // table数据
  defaultValue: props.value,
  ids: [], // 多选id集合
  tabularMap: {}, // 存储下拉tale的所有name
})
// 获取ref
const selectRef: any = ref<HTMLElement | null>(null)
const selectTable: any = ref<HTMLElement | null>(null)
const tQueryConditionRef: any = ref<HTMLElement | null>(null)
const nowIndex = ref(-1)
watch(
  () => props.table.data,
  (val) => {
    state.tableData = val
    nextTick(() => {
      state.tableData &&
        state.tableData.length > 0 &&
        state.tableData.forEach((item: { [x: string]: any }) => {
          state.tabularMap[item[props.keywords.value]] =
            item[props.keywords.label]
        })
    })
  },
  { deep: true }
)
watch(
  () => props.defaultSelectVal,
  (val) => {
    console.log('props.defaultSelectVal---watch', val, isDefaultSelectVal.value)
    state.defaultSelectValue = val
    if (val.length > 0 && isDefaultSelectVal.value) {
      defaultSelect(val)
    }
  },
  { deep: true }
)
onMounted(() => {
  // 设置默认选中项（单选）
  if (state.defaultSelectValue.length > 0 && isDefaultSelectVal.value) {
    defaultSelect(state.defaultSelectValue)
  }
})
// 表格显示隐藏回调
const visibleChange = (visible: boolean) => {
  // console.log('表格显示隐藏回调', visible)
  isVisible.value = visible
  if (isQueryVisible.value) {
    selectRef.value.expanded = true
  }
  // console.log('表格显示隐藏回调--222', visible)
  if (visible) {
    if (props.defaultSelectVal.length > 0 && isDefaultSelectVal.value) {
      defaultSelect(props.defaultSelectVal)
    }
    initTableData()
  } else {
    if (
      tQueryConditionRef.value &&
      props.isShowQuery &&
      props.isClearQuery &&
      !selectRef.value.expanded
    ) {
      tQueryConditionRef.value?.resetHandle()
    }
    findLabel()
    filterMethodHandle('')
  }
}
// 查询条件change事件触发
const handleEvent = () => {
  // console.log('查询条件change事件触发')
  selectRef.value.expanded = true
}
// 条件查询组件的visible-change事件
const queryVisibleChange = (val: boolean) => {
  // console.log('selectVisibleChange---999', val)
  isQueryVisible.value = val
}
// el-select点击了空白区域
const closeBox = () => {
  // console.log('select点击了空白区域', tQueryConditionRef.value)
  // 获取查询条件组件的项
  if (tQueryConditionRef.value && props.isShowQuery) {
    selectRef.value.expanded = true
    Object.values(tQueryConditionRef.value?.props?.opts).map((val: any) => {
      if (
        val.comp.includes('select') ||
        val.comp.includes('picker') ||
        val.comp.includes('date')
      ) {
        val.eventHandle = {
          'visible-change': ($event: boolean) => queryVisibleChange($event),
        }
        // queryVisibleChange(true)
        // isQueryVisible.value = true
        selectRef.value.expanded = true
      }
    })
    if (isVisible.value && props.isShowQuery) {
      selectRef.value.expanded = true
    } else {
      selectRef.value.expanded = false
    }
  }
}
// 单选键盘事件
const selectKeyup = (e: { keyCode: any }) => {
  if (!props.multiple) {
    if (!props.isKeyup) return
    if (state.tableData.length === 0) return
    switch (e.keyCode) {
      case 40: // 下键
        if (state.tableData[nowIndex.value * 1 + 1] !== undefined) {
          selectTable.value.setCurrentRow(
            state.tableData[nowIndex.value * 1 + 1]
          )
          nowIndex.value = nowIndex.value * 1 + 1
        } else {
          nowIndex.value = 0
          selectTable.value.setCurrentRow(state.tableData[0])
        }
        break
      case 38: // 上键
        if (
          state.tableData[nowIndex.value * 1 - 1] !== undefined &&
          nowIndex.value > 0
        ) {
          selectTable.value.setCurrentRow(
            state.tableData[nowIndex.value * 1 - 1]
          )
          nowIndex.value = nowIndex.value * 1 - 1
        } else {
          nowIndex.value = 0
          selectTable.value.setCurrentRow(state.tableData[0])
        }
        break
      case 13: // 回车
        rowClick(state.tableData[nowIndex.value])
        break
    }
  }
}
// 赋值
const findLabel = () => {
  nextTick(() => {
    if (props.multiple) {
      selectRef.value.selected?.forEach(
        (item: { currentLabel: any; value: any }) => {
          item.currentLabel = item.value
        }
      )
    } else {
      selectDefaultLabel.value =
        (state.defaultValue && state.defaultValue[props.keywords.label]) || ''
    }
  })
}

// 抛出事件
const emits = defineEmits(['page-change', 'selectionChange', 'radioChange'])

// 当前页码
const handlesCurrentChange = (val: any) => {
  if (props.multiple) {
    if (!props.reserveSelection) {
      clear()
    }
  } else {
    clear()
  }
  emits('page-change', val)
}
// 默认选中（且只能默认选中第一页的数据）
const defaultSelect = (defaultSelectVal: any[]) => {
  if (props.multiple) {
    let multipleList: any = []
    defaultSelectVal.map((val) => {
      state.tableData.forEach((row: any) => {
        if (val === row[props.keywords.value]) {
          multipleList.push(row)
        }
      })
    })
    setTimeout(() => {
      state.defaultValue = multipleList.map(
        (item: { [x: string]: any }) => item[props.keywords.label]
      )
      multipleList.forEach((row: { [x: string]: any }) => {
        const arr = state.tableData.filter(
          (item: { [x: string]: any }) =>
            item[props.keywords.value] === row[props.keywords.value]
        )
        if (arr.length > 0) {
          selectTable.value.toggleRowSelection(arr[0], true)
        }
      })
      selectRef.value?.selected?.forEach(
        (item: { currentLabel: any; value: any }) => {
          item.currentLabel = item.value
        }
      )
    }, 0)
  } else {
    let row: any, index: any
    state.tableData.map((val: { [x: string]: any }, i: any) => {
      if (val[props.keywords.value] === defaultSelectVal[0]) {
        row = val
        index = i
      }
    })
    radioVal.value = index + 1
    state.defaultValue = row
    setTimeout(() => {
      selectDefaultLabel.value = row && row[props.keywords.label]
    }, 0)
    emits('radioChange', row, row && row[props.keywords.value])
  }
}
// 复选框(多选)
const handlesSelectionChange = (val: any[]) => {
  // console.log('复选框', val)
  isDefaultSelectVal.value = false
  state.defaultValue = val.map((item) => item[props.keywords.label])
  state.ids = val.map((item) => item[props.keywords.value])
  if (val.length === 0) isDefaultSelectVal.value = true
  emits('selectionChange', val, state.ids)
}
// 搜索后表格勾选不取消
const getRowKey = (row: { [x: string]: any }) => {
  return row[props.keywords.value]
}
// 搜索过滤
const filterMethodHandle = (val: string) => {
  if (!props.filterable) return
  const tableData = JSON.parse(JSON.stringify(props.table?.data))
  if (tableData && tableData.length > 0) {
    if (!props.multiple) {
      if (val) {
        radioVal.value = ''
      } else {
        tableData.map((item: { [x: string]: any }, index: number) => {
          if (
            item[props.keywords.value] === selectDefaultLabel.value &&
            selectDefaultLabel.value[props.keywords.value]
          ) {
            radioVal.value = index + 1
          }
        })
      }
    }
    state.tableData = tableData.filter(
      (item: { [x: string]: string | string[] }) => {
        if (item[props.keywords.label].includes(val)) {
          return item
        }
      }
    )
  }
}

// 获取表格数据
const initTableData = () => {
  // 表格默认赋值
  nextTick(() => {
    if (props.multiple) {
      state.defaultValue?.forEach((row: { [x: string]: any }) => {
        const arr = state.tableData.filter(
          (item: { [x: string]: any }) =>
            item[props.keywords.value] === row[props.keywords.value]
        )
        if (arr.length > 0) {
          selectTable.value.toggleRowSelection(arr[0], true)
        }
      })
    } else {
      const arr = state.tableData.filter(
        (item: { [x: string]: any }) =>
          item[props.keywords.value] === selectDefaultLabel.value &&
          selectDefaultLabel.value[props.keywords.value]
      )
      selectTable.value.setCurrentRow(arr[0])
    }
  })
}
// 复制内容
const copyDomText = (val: any) => {
  // 获取需要复制的元素以及元素内的文本内容
  const text = val
  // 添加一个input元素放置需要的文本内容
  const input = document.createElement('input')
  input.value = text
  document.body.appendChild(input)
  // 选中并复制文本到剪切板
  input.select()
  document.execCommand('copy')
  // 移除input元素
  document.body.removeChild(input)
}
// 双击复制单元格内容
const cellDblclick = (
  row: { [x: string]: any },
  column: { property: string | number }
) => {
  try {
    copyDomText(row[column.property])
    ElMessage.success('复制成功')
  } catch (e) {
    ElMessage.error('复制失败')
  }
}
// 点击单选框单元格触发事件
const radioChangeHandle = (
  event: { preventDefault: () => void },
  row: any,
  index: any
) => {
  event.preventDefault()
  isDefaultSelectVal.value = false
  radioClick(row, index)
}
// forbidden取值
const isForbidden = () => {
  forbidden.value = false
  setTimeout(() => {
    forbidden.value = true
  }, 0)
}
// 单选抛出事件radioChange
const radioClick = (row: { [x: string]: any }, index: any) => {
  forbidden.value = !!forbidden.value
  if (radioVal.value) {
    if (radioVal.value === index) {
      radioVal.value = ''
      isForbidden()
      state.defaultValue = {}
      isDefaultSelectVal.value = true
      emits('radioChange', {}, null) // 取消勾选就把回传数据清除
      blur()
    } else {
      isForbidden()
      radioVal.value = index
      state.defaultValue = row
      emits('radioChange', row, row[props.keywords.value])
      blur()
    }
  } else {
    isForbidden()
    radioVal.value = index
    state.defaultValue = row
    emits('radioChange', row, row[props.keywords.value])
    blur()
  }
}
// 单击行
const rowClick = async (row: { [x: string]: any }) => {
  if (!props.rowClickRadio) return
  if (!props.multiple) {
    let rowIndex: any
    // eslint-disable-next-line no-unused-expressions
    props.table?.data.forEach((item: { [x: string]: any }, index: any) => {
      if (item[props.keywords.value] === row[props.keywords.value]) {
        // console.log('index', index)
        rowIndex = index
      }
    })
    // await this.radioClick(row, rowIndex + 1)
    isDefaultSelectVal.value = false
    await radioClick(row, rowIndex + 1)
    if (radioVal.value) {
      isRadio.value = true
    } else {
      isRadio.value = false
    }
  }
}
// tags删除后回调
const removeTag = (tag: any) => {
  const row = state.tableData.find(
    (item: { [x: string]: any }) => item[props.keywords.label] === tag
  )
  console.log('tags删除后回调', row)
  selectTable.value.toggleRowSelection(row, false)
  isDefaultSelectVal.value = true
}
// 清空后的回调
const clear = () => {
  if (props.multiple) {
    selectTable.value.clearSelection()
    isDefaultSelectVal.value = true
    state.defaultValue = []
  } else {
    // 取消高亮
    selectTable.value.setCurrentRow(-1)
    nowIndex.value = -1
    radioVal.value = ''
    isDefaultSelectVal.value = true
    forbidden.value = false
    selectDefaultLabel.value = null
    state.defaultValue = null
    emits('radioChange', {}, null)
  }
}
// 触发select隐藏
const blur = () => {
  selectRef.value.blur()
}
// 触发select显示
const focus = () => {
  selectRef.value.focus()
}
// 暴露方法出去
defineExpose({ focus, blur, clear, tQueryConditionRef })
</script>

<style lang="scss">
.t-select-table {
  // 单选样式
  .radioStyle {
    .el-radio {
      .el-radio__label {
        display: none;
      }
      &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
        box-shadow: none;
      }
    }
    .el-table__row {
      cursor: pointer;
    }
  }
  // 键盘事件开启选择高亮
  .keyUpStyle {
    .el-table__body {
      tbody {
        .current-row {
          color: var(--el-color-primary) !important;
          cursor: pointer;
        }
      }
    }
  }
  // 选中行样式
  .highlightCurrentRow {
    :deep(.current-row) {
      color: var(--el-color-primary);
      cursor: pointer;
    }
  }
  .t-table-select__table {
    padding: 10px;

    .el-table__body,
    .el-table__header {
      margin: 0;
    }
    // 条件查询组件样式
    .table_query_condition {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 10px;
    }
  }

  .t-table-select__page {
    padding-top: 5px;
    padding-right: 10px;
    .el-pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-right: calc(2% - 20px);
      background-color: var(--el-table-tr-bg-color);
    }
  }
}
</style>

五、组件地址

gitHub组件地址

gitee码云组件地址

六、相关文章

vue3+ts基于Element-plus再次封装基础组件文档

基于ElementUi再次封装基础组件文档

基于ant-design-vue再次封装基础组件文档