element-ui简单入门1.0.0

严欣铷

于 2024-08-03 16:05:15 发布

阅读量484

点赞数 3

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/c_yanxin_ru/article/details/140810120

版权

第一篇：table标签速用

总结：建楼前，先打地基<el-table></el-table>，打完地基看高度，一层楼4米，80米20个<el-table-column></el-table-column>，每次楼的名字是label

第一步：全部正确导入element-ui

第二步：来个小demo

        <el-table>
          <el-table-column label="你好"></el-table-column>
          <el-table-column label="我滴小伙伴"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
        </el-table>

显示效果

过程小总结

这个demo由两部分组成：

外部的，内部的<el-table-column></el-table-column>组成

Q：<el-table></el-table>的作用是什么

Q：<el-table-column></el-table-column>的作用是什么

Q：label的属性是什么

A:<el-table></el-table>的作用是什么

此处无el-tabel

          <el-table-column label="你好"></el-table-column>
          <el-table-column label="我滴小伙伴"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>

演示效果如图

null whiter，null whiter，null whiter

加上后效果如图

高楼不能没有地基，不管是人造还是天造，表格不能没有table

A：<el-table-column></el-table-column>的作用是什么

        <el-table>
          <el-table-column label="你好"></el-table-column>
          <el-table-column label="我滴小伙伴"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
        </el-table>

效果：（多到挤在一起了）

楼有多高，层有多少，<el-table-column>

A：label的属性是什么

label属性又有啥用

<el-table>
          <el-table-column label="你好"><span>你好啊</span></el-table-column>
          <el-table-column label="我滴小伙伴"></el-table-column>
          <el-table-column label="这是一个小demo"></el-table-column>
      </el-table>

去除label

      <el-table>
          <el-table-column><span>你好啊</span></el-table-column>
          <el-table-column></el-table-column>
          <el-table-column ></el-table-column>
      </el-table>