@shixinde/vuepress-theme-init
Version:
95 lines (94 loc) • 42.9 kB
JavaScript
import{_ as s,c as n,o as a,a as t}from"./app-Dx9bNbfq.js";const p={},e=t(`<h2 id="_1-获取单行中的一个字段值" tabindex="-1"><a class="header-anchor" href="#_1-获取单行中的一个字段值"><span>1.获取单行中的一个字段值</span></a></h2><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"><</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData<span class="token punctuation">"</span></span> <span class="token attr-name">stripe</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">fixed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Operations<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#default</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">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">link</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>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deleteData(scope.row._id)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">link</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>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>修改<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table-column</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table</span><span class="token punctuation">></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 class="line-number"></div></div></div><h2 id="_2-获取单行中的-index-当前行的下标值" tabindex="-1"><a class="header-anchor" href="#_2-获取单行中的-index-当前行的下标值"><span>2.获取单行中的 index 当前行的下标值</span></a></h2><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"><</span>el-table</span> <span class="token attr-name">:data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>formData<span class="token punctuation">"</span></span> <span class="token attr-name">stripe</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-table-column</span> <span class="token attr-name">fixed</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Operations<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#default</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">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">link</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>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deleteData(scope.$index)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">link</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>primary<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>修改<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table-column</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table</span><span class="token punctuation">></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 class="line-number"></div></div></div><h2 id="_3-消息提示框" tabindex="-1"><a class="header-anchor" href="#_3-消息提示框"><span>3.消息提示框</span></a></h2><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">import</span> <span class="token punctuation">{</span> ElMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'element-plus'</span></span>
<span class="line"></span>
<span class="line"><span class="token function">ElMessage</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'删除成功！'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'success'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><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></div><h2 id="_4-自定义表单校验" tabindex="-1"><a class="header-anchor" href="#_4-自定义表单校验"><span>4.自定义表单校验</span></a></h2><h3 id="确认密码" tabindex="-1"><a class="header-anchor" href="#确认密码"><span>---确认密码</span></a></h3><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">var</span> <span class="token function-variable function">validatePass</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">rule</span><span class="token operator">:</span> any<span class="token punctuation">,</span> <span class="token literal-property property">value</span><span class="token operator">:</span> any<span class="token punctuation">,</span> <span class="token literal-property property">callback</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'请再次输入密码'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token comment">// password 是表单上绑定的字段</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>ruleForm<span class="token punctuation">.</span>passward <span class="token operator">!==</span> ruleForm<span class="token punctuation">.</span>passward2<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'两次输入密码不一致!'</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> rules <span class="token operator">=</span> reactive<span class="token operator"><</span>FormRules<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">userName</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入账号'</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">passward</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入密码'</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'密码最小6位,最大18位!'</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">passward2</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">validator</span><span class="token operator">:</span> validatePass<span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span><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 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 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><h3 id="验证手机号" tabindex="-1"><a class="header-anchor" href="#验证手机号"><span>---验证手机号</span></a></h3><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 literal-property property">phone</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入手机号'</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span> <span class="token literal-property property">pattern</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">'请输入正确的号码格式'</span><span class="token punctuation">,</span> <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">'blur'</span> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">]</span><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></div><h2 id="_5-全局配置dialog点击遮罩层不关闭对话框" tabindex="-1"><a class="header-anchor" href="#_5-全局配置dialog点击遮罩层不关闭对话框"><span>5.全局配置Dialog点击遮罩层不关闭对话框</span></a></h2><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token comment">//plugins/element.ts</span></span>
<span class="line"><span class="token keyword">import</span> ElementPlus <span class="token keyword">from</span> <span class="token string">'element-plus'</span></span>
<span class="line"><span class="token comment">//import '../assets/style/element-variables.scss'</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'element-plus/dist/index.css'</span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span>app<span class="token operator">:</span><span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>app<span class="token punctuation">.</span>_context<span class="token punctuation">)</span></span>
<span class="line"> app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>ElementPlus<span class="token punctuation">,</span> <span class="token punctuation">{</span>size<span class="token operator">:</span><span class="token string">'small'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"> app<span class="token punctuation">.</span>_context<span class="token punctuation">.</span>components<span class="token punctuation">.</span>ElDialog<span class="token punctuation">.</span>props<span class="token punctuation">.</span>closeOnClickModal<span class="token punctuation">.</span>default <span class="token operator">=</span> <span class="token boolean">false</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token comment">//main.js</span></span>
<span class="line"><span class="token operator">...</span><span class="token punctuation">.</span></span>
<span class="line"><span class="token keyword">import</span> installElementPlus <span class="token keyword">from</span> <span class="token string">'./plugins/element'</span></span>
<span class="line"><span class="token operator">...</span></span>
<span class="line"> </span>
<span class="line"><span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span></span>
<span class="line"><span class="token function">installElementPlus</span><span class="token punctuation">(</span>app<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 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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="图片-点击可以放大预览" tabindex="-1"><a class="header-anchor" href="#图片-点击可以放大预览"><span>图片 点击可以放大预览</span></a></h2><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre class="language-html"><code><span class="line"><el-image style="width: 100px; height: 100px" :src="ruleForm.imgUrl" :preview-src-list="Array(ruleForm.imgUrl)" :initial-index="0"</span>
<span class="line"></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></div><h2 id="表格设置表头居中" tabindex="-1"><a class="header-anchor" href="#表格设置表头居中"><span>表格设置表头居中</span></a></h2><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"><</span>el-table</span> <span class="token attr-name">:header-cell-style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{'text-align':'center'}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table</span><span class="token punctuation">></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></div><h2 id="图片嵌套在表格中放大预览-背后层级出现问题" tabindex="-1"><a class="header-anchor" href="#图片嵌套在表格中放大预览-背后层级出现问题"><span>图片嵌套在表格中放大预览 背后层级出现问题</span></a></h2><blockquote><p>增加这条代码</p></blockquote><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line">:preview-teleported='true'</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></div><blockquote><p>完整代码</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"><</span>el-table-column</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>imgUrl<span class="token punctuation">"</span></span> <span class="token attr-name">label</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">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>180<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#default</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">></span></span></span>
<span class="line"> <span class="token comment"><!-- :initial-index="scope.$index" --></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-image</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100px</span><span class="token punctuation">"</span></span></span> <span class="token attr-name">:preview-src-list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>imageUrls<span class="token punctuation">"</span></span> <span class="token attr-name">:initial-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scope.$index<span class="token punctuation">"</span></span></span>
<span class="line"> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scope.row.imgUrl<span class="token punctuation">"</span></span> <span class="token attr-name">fit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>contain<span class="token punctuation">"</span></span> <span class="token attr-name">:z-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>9999<span class="token punctuation">'</span></span> <span class="token attr-name">:preview-teleported</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>true<span class="token punctuation">'</span></span> <span class="token punctuation">/></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-table-column</span><span class="token punctuation">></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><h2 id="编程式弹层-elmessagebox-confirm" tabindex="-1"><a class="header-anchor" href="#编程式弹层-elmessagebox-confirm"><span>编程式弹层 ElMessageBox.confirm</span></a></h2><blockquote><p>import { ElMessageBox } from 'element-plus';</p></blockquote><div class="language-text line-numbers-mode" data-highlighter="prismjs" data-ext="text" data-title="text"><pre class="language-text"><code><span class="line"> ElMessageBox.confirm('确认移除该监听器吗？', '提示', {</span>
<span class="line"> confirmButtonText: '确 认',</span>
<span class="line"> cancelButtonText: '取 消',</span>
<span class="line"> })</span>
<span class="line"> .then(() => {</span>
<span class="line"> bpmnElementListeners.value.splice(index, 1);</span>
<span class="line"> elementListenersList.value.splice(index, 1);</span>
<span class="line"> updateElementExtensions(</span>
<span class="line"> bpmnElement.value,</span>
<span class="line"> otherExtensionList.value.concat(bpmnElementListeners.value),</span>
<span class="line"> );</span>
<span class="line"> })</span>
<span class="line"> .catch(() => console.info('操作取消'));</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 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>`,25),l=[e];function o(c,i){return a(),n("div",null,l)}const r=s(p,[["render",o],["__file","Vue3_Element Plus.html.vue"]]),k=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/Vue3_Element%20Plus.html","title":"Vue3+Element Plus","lang":"zh-CN","frontmatter":{"title":"Vue3+Element Plus","date":"2022-12-29T00:00:00.000Z","tags":["Vue3.0","Element Plus","笔记"],"categories":["居家篇"]},"headers":[{"level":2,"title":"1.获取单行中的一个字段值","slug":"_1-获取单行中的一个字段值","link":"#_1-获取单行中的一个字段值","children":[]},{"level":2,"title":"2.获取单行中的 index 当前行的下标值","slug":"_2-获取单行中的-index-当前行的下标值","link":"#_2-获取单行中的-index-当前行的下标值","children":[]},{"level":2,"title":"3.消息提示框","slug":"_3-消息提示框","link":"#_3-消息提示框","children":[]},{"level":2,"title":"4.自定义表单校验","slug":"_4-自定义表单校验","link":"#_4-自定义表单校验","children":[{"level":3,"title":"---确认密码","slug":"确认密码","link":"#确认密码","children":[]},{"level":3,"title":"---验证手机号","slug":"验证手机号","link":"#验证手机号","children":[]}]},{"level":2,"title":"5.全局配置Dialog点击遮罩层不关闭对话框","slug":"_5-全局配置dialog点击遮罩层不关闭对话框","link":"#_5-全局配置dialog点击遮罩层不关闭对话框","children":[]},{"level":2,"title":"图片 点击可以放大预览","slug":"图片-点击可以放大预览","link":"#图片-点击可以放大预览","children":[]},{"level":2,"title":"表格设置表头居中","slug":"表格设置表头居中","link":"#表格设置表头居中","children":[]},{"level":2,"title":"图片嵌套在表格中放大预览 背后层级出现问题","slug":"图片嵌套在表格中放大预览-背后层级出现问题","link":"#图片嵌套在表格中放大预览-背后层级出现问题","children":[]},{"level":2,"title":"编程式弹层 ElMessageBox.confirm","slug":"编程式弹层-elmessagebox-confirm","link":"#编程式弹层-elmessagebox-confirm","children":[]}],"git":{"updatedTime":1755347964000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"vue笔记及周边生态/Vue3+Element Plus.md","excerpt":"<h2>1.获取单行中的一个字段值</h2>\\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\\"><</span>el-table</span> <span class=\\"token attr-name\\">:data</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>formData<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">stripe</span> <span class=\\"token special-attr\\"><span class=\\"token attr-name\\">style</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span><span class=\\"token value css language-css\\"><span class=\\"token property\\">width</span><span class=\\"token punctuation\\">:</span> 100%</span><span class=\\"token punctuation\\">\\"</span></span></span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>el-table-column</span> <span class=\\"token attr-name\\">fixed</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>right<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">label</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>Operations<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>template</span> <span class=\\"token attr-name\\">#default</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\\">></span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>el-button</span> <span class=\\"token attr-name\\">link</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>primary<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">size</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>small<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">@click</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>deleteData(scope.row._id)<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span>删除<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>el-button</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"><</span>el-button</span> <span class=\\"token attr-name\\">link</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>primary<span class=\\"token punctuation\\">\\"</span></span> <span class=\\"token attr-name\\">size</span><span class=\\"token attr-value\\"><span class=\\"token punctuation attr-equals\\">=</span><span class=\\"token punctuation\\">\\"</span>small<span class=\\"token punctuation\\">\\"</span></span><span class=\\"token punctuation\\">></span></span>修改<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>el-button</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>template</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>el-table-column</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"> <span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\"></</span>el-table</span><span class=\\"token punctuation\\">></span></span></span>\\n<span class=\\"line\\"></span></code></pre></div>"}');export{r as comp,k as data};