element-ui中的column的使用

下蛋的鹅

已于 2023-04-16 13:40:20 修改

阅读量1.7k

点赞数

文章标签： ui vue.js javascript 前端 elementui

于 2023-03-15 09:41:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43184101/article/details/129544731

版权

本文详细介绍了Element-UI中Column的使用，包括设置斑马纹、带边框表格、固定表头和列、自定义索引、合并行和列、设置全选、显示提示以及合计功能。此外，还提到了如何通过slot-scope处理内部数据，并提供了与el-select组件配合的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui中的column的使用

一、column？

1设置斑马纹 :stripe属性
2 带边框的表格: border
3 :row-class-name=“tableRowClassName” 设置类给css样式就可以了
4固定表头给el-table来设置高度 height=“250”
5固定列使用 fixed的属性来进行
6固定表头和类的话设置好上面两个属性 height="250和 fixed
7 超出高度的时候出现滚动条 max-height="250
8设置全选把 el-table-column 中的type设置成 type=“selection”
9如果省略的话会做提示 show-overflow-tooltip
10 我们可以通过 slot-scope="scope"来进行对内部数据的一个管理控制，可以拿到 row,$index,column和store(table的内部状态)

11我们想要自定义索引的话，设置el-table-column为中的type=“index”

12 设置合并行和合并列的方法在el-table中设置 :span-method=“arraySpanMethod”
合并行的方法 :span-method=“objectSpanMethod” 设置合并列的方法
13 用来设置 show-summary用来设置合计，合计最后的值来进行计算的
14使用 el-select,当我们需要进行判断的时候，需要进行组件回调参数的值就是我们选中的值

  <el-select v-model="dataForm.select" placeholder="请选择活动区域" @change="area"    label-position="right">
          <el-option  v-for="item in optionData" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

在这里插入图片描述

我们可以选中来打印value的值，来进行处理
或者我们来进行

当我们使用select组件库的时候，我们设置它于其他组件相同宽的时候，我们可以直接设置组件库中的样式el-select{width:100% } 来进行设置

我们通过数组来进行遍历，表格。

  <el-table
       stripe
      :data="tableData">
      <el-table-column  v-for="item in tableNameTwo" 
        :prop="item.prop"
        :label="item.label"
      >
      <template v-slot="{row,$index}"> 
                 <span v-if="row.name== 'opop'"  style="color:green;">123456</span>
                 <span v-else>{{row[item.prop]}}</span>
       </template> 
      </el-table-column>

    tableNameTwo:[
        {prop:"name",label:"课程"},
        {prop:"todayBuy",label:"今日课程"},
        {prop:"monthBuy",label:"本月购买"},
        {prop:"totalBuy",label:"自愿购买"},
       ],

我们通过对象来进行遍历，对象拿到下面的值一般我们是可以通过 "对象. name"或者“ 对象[name]” 来进行，因为是小胡子语法嘛，所以我们使用的的是，对象[]拿到下面的值

  <!-- <el-table-column  v-for="(val,key) in tableName" 
        :prop="key"
        :label="val"
      > -->
  <!-- <span v-if="row.name== 'opop'"  style="color:green;">123456</span> -->
  <!-- <span v-else>{{row[key]}}</span> -->
  tableName:{
        name:"课程",
        todayBuy:"今日课程",
        monthBuy:"本月购买",
        totalBuy:"自愿购买",
       },