vue3+Element-plus el-select 下拉表格组件(2023-08-21 解决TSelectTable组件表单编辑回显设置defaultSelectVal 无效)

2023-08-21 解决TSelectTable组件表单编辑回显设置defaultSelectVal 无效

2023-06-28 TSelectTable组件新增查询条件;效果如下:

vue3+Element-plus el-select 下拉表格组件(2023-08-21 解决TSelectTable组件表单编辑回显设置defaultSelectVal 无效)_第1张图片

一、最终效果

二、代码示例

<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 属性

参数 说明 类型 默认值
v-model 绑定值 boolean / string / number 仅显示
table 表格数据对象 Object {}
—data 展示下拉数据源 Array []
—total 数据总条数 Number -
—pageSize 每页显示条目个数 Number -
—currentPage 当前页数 Number -
columns 表头信息 Array []
----bind el-table-column Attributes Object -
----noShowTip 是否换行 (设置:noShowTip:true) Boolean false
----fixed 列是否固定( left, right) string, boolean -
----align 对齐方式(left/center/right) String center
----render 返回三个参数(text:当前值,row:当前整条数据 ,index:当前行) function -
----slotName 插槽显示此列数据(其值是具名作用域插槽) String -
------scope 具名插槽获取此行数据必须用解构接收{scope} Object 当前行数据
keywords 关键字配置(value-key 配置) Object
------label 选项的标签 String ‘label’
------value 选项的值 String ‘value’
radioTxt 单选文案 String 单选
multiple 是否开启多选 Boolean false
isShowPagination 开启分页 Boolean false
isShowFirstColumn 是否显示首列(单选) boolean true
filterable 是否开启过滤(根据 keywords 的 label 值进行过滤) Boolean true
reserveSelection 是否支持翻页选中 Boolean true
tableWidth table 宽度 Number 550
isShowQuery 是否允许配置查询条件(继承TQueryCondition的所有属性、事件、插槽) Boolean false

2. 事件(events)继承 el-table 及 el-select 属性

事件名 说明 回调参数
page-change 页码改变事件 返回选中的页码
selectionChange 多选事件 返回选中的项数据及选中项的 keywords.value 集合
radioChange 单选 返回当前项所有数据

3.方法(Methods)继承 el-table 及 el-select 属性

方法名 说明 回调参数
focus 使 input 获取焦点
blur 使 input 失去焦点,并隐藏下拉框

四、具体代码

<template>
  <el-select ref="selectRef" v-model="state.defaultValue" popper-class="t-select-table" :multiple="multiple"
    v-bind="selectAttr" :value-key="keywords.value" @visible-change="visibleChange" @remove-tag="removeTag"
    @clear="clear">
    <template #empty>
      <div class="t-table-select__table" :style="{ width: `${tableWidth}px` }">
        <el-table ref="selectTable" :data="state.tableData" class="radioStyle" border @row-click="rowClick"
          @cell-dblclick="cellDblclick" @selection-change="selectionChange" v-bind="$attrs">
          <el-table-column v-if="multiple" type="selection" width="55" fixed>el-table-column>
          <el-table-column type="radio" width="55" :label="radioTxt" fixed v-else>
            <template #default="scope">
              <el-radio v-model="state.radioVal" :label="scope.$index + 1"
                @click.native.prevent="radioChange(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 || item.width"
            :align="item.align || 'center'" :fixed="item.fixed" :show-overflow-tooltip="item.noShowTip"
            v-bind="{ ...item.bind, ...$attrs }">
            <template #default="scope">
              
              <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
            layout="total, prev, pager, next, jumper" :pager-count="5" :total="table.total" v-bind="$attrs" />
        div>
      div>
    template>
  el-select>
template>

五、组件地址

gitHub组件地址

gitee码云组件地址

六、相关文章

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


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


你可能感兴趣的:(vue3,element-plus,typescript,el-select,el-table,TSelectTable)