Vue框架下类ElementUI的表格组件

2019-11-28 10:39:56

<p>一直在用React,接触Vue的时间并不多,整了半天终于看起来优雅了点,功能也没有ElementUI中那么复杂,但是简单好用,方便在pc/mobile控制响应式布局</p><p><br></p><p>用了两个组件KTable(主体),KTableColumn(表格每一列)</p><p><br></p><p>KTable 伪代码:</p><p>[html]</p><p>&lt;template&gt;</p><p> &lt;div class="mod-table"&gt;</p><p> &lt;div class="com-table-wrapper"&gt;</p><p>&nbsp;&nbsp;&nbsp;&lt;div class="table-fixed"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;table cellspacing="0" cellpadding="0" border="0"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;thead&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;tr&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;slot&gt;&lt;/slot&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/tr&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/thead&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/table&gt;</p><p>&nbsp;&nbsp;&nbsp;&lt;/div&gt;</p><p> &lt;table cellspacing="0" cellpadding="0" border="0"&gt;</p><p> &lt;thead&gt;</p><p> &lt;tr&gt;</p><p> &lt;slot&gt;&lt;/slot&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><p> &lt;/tr&gt;</p><p> &lt;/thead&gt;</p><p> &lt;tr v-for="item in tableData" v-bind:key="item.id"&gt;</p><p> &lt;slot v-slot:template v-bind="item"&gt;&lt;/slot&gt;</p><p> &lt;/tr&gt;</p><p> &lt;/table&gt;</p><p> &lt;div class="com-loading" v-if="loading"&gt;</p><p> &lt;i class="el-icon-loading"&gt;&lt;/i&gt;</p><p> &lt;/div&gt;</p><p>&lt;/div&gt;</p><p>&lt;/div&gt;</p><p>&lt;/template&gt;</p><p>&lt;style lang="less"&gt;</p><p> .table-fixed{</p><p>&nbsp;&nbsp;position: fixed;</p><p>&nbsp;&nbsp;background: white;</p><p>&nbsp;&nbsp;width: 100%;</p><p>&nbsp;&nbsp;z-index: 5;/*td中有些元素是absolute*/</p><p>&nbsp;} </p><p>&lt;/style&gt;</p><p>[/html]</p><p><br></p><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> KTableColumn <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/KTableColumn'</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { &nbsp;<span class="hljs-attr">name</span>: <span class="hljs-string">'KTable'</span>, &nbsp;<span class="hljs-attr">components</span>:{KTableColumn}, &nbsp;data() { &nbsp;&nbsp;<span class="hljs-keyword">return</span> { &nbsp;&nbsp;}; &nbsp;}, &nbsp;<span class="hljs-attr">props</span>:{ &nbsp; <span class="hljs-attr">loading</span>:{ &nbsp; <span class="hljs-attr">type</span>:<span class="hljs-built_in">Boolean</span>,<span class="hljs-attr">default</span>:<span class="hljs-literal">true</span>, <span class="hljs-attr">required</span>:<span class="hljs-literal">false</span> &nbsp; }, &nbsp;&nbsp;<span class="hljs-attr">mobile</span>:{ &nbsp;&nbsp;&nbsp;<span class="hljs-attr">type</span>:<span class="hljs-built_in">Boolean</span>,<span class="hljs-attr">default</span>:<span class="hljs-literal">false</span>, <span class="hljs-attr">required</span>:<span class="hljs-literal">true</span> &nbsp;&nbsp;}, &nbsp;&nbsp;<span class="hljs-attr">pagination</span>:{ &nbsp;&nbsp;&nbsp;<span class="hljs-attr">type</span>:<span class="hljs-built_in">Object</span>, <span class="hljs-attr">required</span>:<span class="hljs-literal">false</span>,<span class="hljs-attr">default</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ &nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-keyword">return</span> { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-attr">total</span>:<span class="hljs-number">1</span>,<span class="hljs-attr">pagesize</span>:<span class="hljs-number">1</span> &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}, &nbsp; <span class="hljs-attr">data</span>:{ &nbsp; <span class="hljs-attr">type</span>:<span class="hljs-built_in">Array</span>,<span class="hljs-attr">required</span>:<span class="hljs-literal">true</span>,&nbsp; &nbsp; <span class="hljs-attr">default</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ &nbsp; <span class="hljs-keyword">return</span> [] &nbsp; }, &nbsp; } &nbsp;}, &nbsp;<span class="hljs-attr">computed</span>:{ &nbsp; <span class="hljs-attr">columnsLabels</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ &nbsp; <span class="hljs-keyword">if</span>( <span class="hljs-keyword">this</span>.data ){ &nbsp; <span class="hljs-keyword">let</span> slots = []; &nbsp; <span class="hljs-keyword">let</span> labels = (<span class="hljs-keyword">this</span>.$slots.default || []).map(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>{ &nbsp; <span class="hljs-keyword">let</span> data = res.data; &nbsp; <span class="hljs-keyword">if</span>( data ){ &nbsp; slots.push( res.context.$scopedSlots); &nbsp; <span class="hljs-keyword">return</span> data.attrs.prop; &nbsp; } &nbsp; <span class="hljs-keyword">return</span> <span class="hljs-string">''</span>; &nbsp; }) &nbsp; labels = labels.filter(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span>res!=<span class="hljs-string">''</span>); &nbsp; <span class="hljs-keyword">return</span> labels; &nbsp; } &nbsp; }, &nbsp; <span class="hljs-attr">tableData</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{ &nbsp; <span class="hljs-keyword">let</span> data = (<span class="hljs-keyword">this</span>.data || []) &nbsp; <span class="hljs-keyword">return</span> data.map( <span class="hljs-function">(<span class="hljs-params">res, i </span>)=&gt;</span>{ &nbsp; res.$index = i; &nbsp; res.$row = data; &nbsp; <span class="hljs-keyword">return</span> res; &nbsp; }); &nbsp; } &nbsp;}, &nbsp;<span class="hljs-attr">methods</span>:{ &nbsp;&nbsp;onPageChange( page ){ &nbsp;&nbsp;&nbsp;<span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'current-change'</span>, page); &nbsp;&nbsp;} &nbsp;}, &nbsp;mounted(){ &nbsp; <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"###################"</span>, <span class="hljs-keyword">this</span>) &nbsp;} }; </pre><p><br></p><p><br></p><p>KTableColumn 伪代码:</p><p><br></p><p>[html]</p><p>&lt;template&gt;</p><p> &lt;td class="com-tablecolumn"&gt;</p><p>&nbsp;&nbsp;&lt;!-- 如果没配置$row,则显示为表头 --&gt;</p><p>&nbsp;&nbsp;&lt;slot name="template" v-if="column &amp;&amp; column.$row "&gt;{{displayLabel}}&lt;/slot&gt;</p><p>&nbsp;&nbsp;&lt;div v-else&gt;</p><p>&nbsp;&nbsp;&nbsp;{{label}}</p><p>&nbsp;&nbsp;&nbsp;&lt;div class="table-sort" v-if="column &amp;&amp; column.sort"&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="el-icon-caret-top" v-if="column &amp;&amp; column.sort=='desc'" /&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;i class="el-icon-caret-bottom" v-else /&gt;</p><p>&nbsp;&nbsp;&nbsp;&lt;/div&gt;</p><p>&nbsp;&nbsp;&nbsp;&nbsp;</p><p>&nbsp;&nbsp;&lt;/div&gt;</p><p> &lt;/td&gt;</p><p>&lt;/template&gt;</p><p>[/html]</p><p><br></p><p><br></p><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { &nbsp;<span class="hljs-attr">name</span>: <span class="hljs-string">'KTableColumn'</span>, &nbsp;data() { &nbsp;&nbsp;<span class="hljs-keyword">return</span> { &nbsp;&nbsp;}; &nbsp;}, &nbsp;<span class="hljs-attr">props</span>:{ &nbsp; <span class="hljs-attr">loading</span>:{ &nbsp; <span class="hljs-attr">type</span>:<span class="hljs-built_in">Boolean</span>,<span class="hljs-attr">default</span>:<span class="hljs-literal">false</span>, <span class="hljs-attr">required</span>:<span class="hljs-literal">false</span> &nbsp; }, &nbsp; <span class="hljs-attr">label</span>:{ &nbsp;&nbsp;&nbsp;<span class="hljs-attr">type</span>:<span class="hljs-built_in">String</span>, <span class="hljs-attr">default</span>:<span class="hljs-string">""</span>, <span class="hljs-attr">required</span>:<span class="hljs-literal">false</span> &nbsp;&nbsp;}, &nbsp;&nbsp;<span class="hljs-comment">/** 表格单元格的字段名 */</span> &nbsp;&nbsp;<span class="hljs-attr">prop</span>: { &nbsp;&nbsp;&nbsp;<span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span> &nbsp;&nbsp;}, &nbsp;&nbsp;<span class="hljs-attr">column</span>:<span class="hljs-literal">null</span> &nbsp;}, &nbsp;<span class="hljs-attr">computed</span>:{ &nbsp;&nbsp;<span class="hljs-comment">/** 显示的模板 **/</span> &nbsp;&nbsp;displayLabel(){ &nbsp;&nbsp;&nbsp;<span class="hljs-keyword">if</span>( <span class="hljs-keyword">this</span>.column ){ &nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.column[ <span class="hljs-keyword">this</span>.prop ] || <span class="hljs-string">''</span>; &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;<span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.label; &nbsp;&nbsp;} &nbsp;}, &nbsp;<span class="hljs-attr">methods</span>:{ &nbsp;}, &nbsp;mounted(){ &nbsp;} }; </pre><p><br></p><p>使用说明:</p><p><br></p><p>[html]</p><p>//loading用于控制显示下拉加载进度</p><p>//data为表格数据</p><p>//scope为第一行的数据</p><p>&lt;KTable :data="tableData" :loading="loading" v-slot:default="scope" @scroll.native="onWrapperScroll"&gt;</p><p>  &lt;KTableColumn label="标题" prop="log_Title" :column="scope"&gt;&lt;/KTableColumn&gt;</p><p>  &lt;KTableColumn label="日期" prop="log_PostTime" :column="scope"&gt;&lt;/KTableColumn&gt;</p><p>  &lt;KTableColumn label="其它" prop="other" :column="scope" class="hidden-xs-only"&gt;&lt;/KTableColumn&gt;</p><p>  &lt;KTableColumn label="操作" prop="action" :column="scope"&gt;</p><p>    &lt;template v-slot:template&gt;</p><p>    &lt;el-button size="mini" @click.native="onEditHandler(scope)"&gt;编辑&lt;/el-button&gt;</p><p>    &lt;el-button size="mini" @click.native="onViewHandler(scope)"&gt;详情&lt;/el-button&gt;</p><p>    &lt;/template&gt;</p><p>  &lt;/KTableColumn&gt;</p><p>&lt;/KTable&gt;</p><p>[/html]</p><p><br></p><p>来个效果图:</p><p><img src="http://www.shareme.cn/attachments/month_20191128/bad3e61448a0a17d0522d36cd8c997bc.png"></p>