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>

你可能感兴趣的:(javascript,javascript,html,vue.js)