vxe-table可编辑状态默认显示下拉选select为默认展示

vxe-table可编辑状态默认显示下拉选select为默认展示

vxe-table是一个功能齐全的表格解决方案,设置可编辑状态输入下拉框等组件默认是不显示的,只有点击或者双击通过其他事件才能触发,为此我尝试了很多方法改样式改底层代码很麻烦,最后使用插槽搭配表格的属性来实现,通过在vxe-table的edit-render中的autofocus属性实现点击其他元素聚焦select输入框从而显示option列表,然后使用插槽模板template的default默认表格内容从而无缝默认展示select输入框,以下是代码实现。

 <vxe-table :edit-rules="validRules" size="small" :data="tableData" border :edit-config="{trigger: `click`, mode: 'cell'}">
   <template v-for="(item, index) in tableHead" >
      <vxe-table-column
        :title="item.columnName"
        width="120px"
        fixed="center"
        :key="index"
        :prop="item.name"
        :field="item.name"
        :edit-render="{autofocus: 'testceshi', name: 'select', options: isOrNoOrYN}"
      >
        <template :default="{row}">
          <select class="testceshi vxe-default-select">
            <option :selected="tableData[0].techVal === ite.value" v-for="ite in isOrNoOrYN" :key="ite.value" :value="ite.value" >{{ite.label}}</option>
          </select>
        </template>
      </vxe-table-column>
    </template>
  </vxe-table>
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秋叶原的琴音

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值