@shixinde/vuepress-theme-init/docs/assets/vxe-table笔记.html-yUGgZHig.js

### 其他开源项目

import{_ as a,c as n,o as s,a as t}from"./app-Dx9bNbfq.js";const p={},e=t(`<h2 id="动态添加输入框并获取焦点" tabindex="-1"><a class="header-anchor" href="#动态添加输入框并获取焦点"><span>动态添加输入框并获取焦点</span></a></h2><blockquote><p>注意一定要加 edit-render=&quot;{ autofocus: &#39;.vxe-input--inner&#39; }&quot;</p></blockquote><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>vxe-table-column</span> <span class="token attr-name">field</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>coption<span class="token punctuation">&quot;</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选项<span class="token punctuation">&quot;</span></span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span></span>
<span class="line">                  <span class="token attr-name">:edit-render</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ autofocus: &#39;.vxe-input--inner&#39; }<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#edit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>
<span class="line">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>vxe-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scope.row.coption<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:disabled</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formDisabled<span class="token punctuation">&quot;</span></span></span>
<span class="line">                   <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$refs.xTable.updateStatus(scope)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>vxe-input</span><span class="token punctuation">&gt;</span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>vxe-table-column</span><span class="token punctuation">&gt;</span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> $table <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>xTable2</span>
<span class="line"><span class="token keyword">const</span> record <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">serialNum</span><span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>zm<span class="token punctuation">[</span><span class="token keyword">this</span><span class="token punctuation">.</span>tableData<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token literal-property property">coption</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token literal-property property">row</span><span class="token operator">:</span> newRow <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> $table<span class="token punctuation">.</span><span class="token function">insertAt</span><span class="token punctuation">(</span>record<span class="token punctuation">,</span> row<span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">await</span> $table<span class="token punctuation">.</span><span class="token function">setEditCell</span><span class="token punctuation">(</span>newRow<span class="token punctuation">,</span> <span class="token string">&#39;coption&#39;</span><span class="token punctuation">)</span></span>
<span class="line"><span class="token keyword">this</span><span class="token punctuation">.</span>tableData<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>newRow<span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4),o=[e];function l(c,u){return s(),n("div",null,o)}const k=a(p,[["render",l],["__file","vxe-table笔记.html.vue"]]),r=JSON.parse(`{"path":"/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/vxe-table%E7%AC%94%E8%AE%B0.html","title":"vxe-table笔记","lang":"zh-CN","frontmatter":{"title":"vxe-table笔记","date":"2023-5-21","tags":["vxe-table","笔记"],"categories":["汇智篇"]},"headers":[{"level":2,"title":"动态添加输入框并获取焦点","slug":"动态添加输入框并获取焦点","link":"#动态添加输入框并获取焦点","children":[]}],"git":{"updatedTime":1755347964000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"vue笔记及周边生态/vxe-table笔记.md","excerpt":"<h2>动态添加输入框并获取焦点</h2>\\n<blockquote>\\n<p>注意一定要加  edit-render=\\"{ autofocus: '.vxe-input--inner' }\\"</p>\\n</blockquote>\\n<div class=\\"language-html\\" data-highlighter=\\"prismjs\\" data-ext=\\"html\\" data-title=\\"html\\"><pre class=\\"language-html\\"><code><span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>vxe-table-column</span> <span class=\\"token attr-name\\">field</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>coption<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">title</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>选项<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">align</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>center<span class=\\"token punctuation\\">\\"</span></span></span>\\n<span class=\\"line\\">                  <span class=\\"token attr-name\\">:edit-render</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>{ autofocus: '.vxe-input--inner' }<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\">    <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>template</span> <span class=\\"token attr-name\\">#edit</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>scope<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\">        <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>vxe-input</span> <span class=\\"token attr-name\\">type</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>text<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">v-model</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>scope.row.coption<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">:disabled</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>formDisabled<span class=\\"token punctuation\\">\\"</span></span></span>\\n<span class=\\"line\\">                   <span class=\\"token attr-name\\">@change</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>$refs.xTable.updateStatus(scope)<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">&gt;</span></span><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>vxe-input</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\">    <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>template</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>vxe-table-column</span><span class=\\"token punctuation\\">&gt;</span></span></span>\\n<span class=\\"line\\"></span></code></pre></div>"}`);export{k as comp,r as data};