element-ui中的column的使用_el-column

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>
1
2
3

我们可以选中来打印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:"自愿购买"},
       ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们通过对象来进行遍历，对象拿到下面的值一般我们是可以通过 "对象. 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:"自愿购买",
       },
1
2
3
4
5
6
7
8
9
10
11
12