自定义一个VUE 表格工具类

最新推荐文章于 2024-06-11 22:32:38 发布

乱糟糟的人哦

最新推荐文章于 2024-06-11 22:32:38 发布

阅读量1k

点赞数 1

分类专栏： vue 自定定义工具类文章标签： vue table html 自定义table

本文链接：https://blog.csdn.net/smallboh/article/details/102657194

版权

学习新东西时一定要仔细看文档，弄清楚文档之后再做；不要一上来就上手操作；不然，东西做完了，却发现你做的只是个纸房子，不中用啊

摘要由CSDN通过智能技术生成

坚持写博客，坚持就是胜利；坚持好难啊。。。。。
这次隔了这么久才写是因为
没有啥新知识点的值得写，一找，csdn，博客园，简书，掘金等等，一大堆。所以就是学习了。
啊，对就学习了。不是懒。

这次知识点是# 自定义表格工具类，我是刚开始学的就是Java，所以什么都想做个抽象类啊，工具类啊，扩展类啊什么的。嘿嘿
所以这次把表格抽出来，做个自定义的工具类，他必须有以下特点：

1，可以自定义th，

2，可以定义宽高（style）

以下分为几步走，
1，先做th，可以外部扩展的。
这个很简单，直接v-for

    <div class="table">
         <table>
             <thead>
                  <th v-for="(item, index) in th_list" :key="index" v-text="item.name"  v-tWid="item.w"></th>
             </thead>
             <tbody>
   				
             </tbody>
         </table>
    </div>

script 脚本是这样的

 //
const ths=[ 'ID','NAME','AGE','SEX','TEL'];
export default {
   
    layout:"backMgr",
      data() {
   
          return {
   
             th_list:ths
          }
     }
}

完美，这样 thead就OK了。

在这里插入图片描述很简单吧。

但是，有一点莫要忘记，

宽度，

有的列宽度小，例如ID，SEX，AGE 等，80px，90px 就OK了，
但是，若是有remark，address，description等，那就不够了。
所以，我们需要定义一下自定义一下宽高度，

NA，用到新的知识点了，指令，自定义指令，不知道的同学不要紧张，先去看看什么是指令，知道定义就好；

看！ _代码

const ths=[
            {
   name:'ID',w:'90',height:'auto'},
            {
   name:'NAME',w:'100',height:'auto'},
            {
   name:'AGE',w:'80',height:'auto'},
            {
   name:'SEX',w:'80',height:'auto'},
            {
   name:'TEL',w:'180',height:'auto'},
            {
   name:'ZIP CODE',w:'140',height:'auto'},
            {
   name:'ADDRESS',w:'180',height:'auto'