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>
