Vue 学习——表格列表数据显示百分号%、显示数字改为自定义内容、数据表头下拉、点击筛选数据

目录

Vue 格式formatter

1、Vue表格列表数据显示百分号%

 2、Vue显示数字改为自定义内容

Vue element-ui 数据表头下拉，点击筛选数据

---

Vue 格式formatter

初次学习，感觉网上内容较少，有些内容又格式复杂对初学者不好理解

先看演示效果，下图找不同~嘿嘿~

修改前                                                                   修改后

                   

具体操作：

1、Vue表格列表数据显示百分号%

定义表格元素

标签：属性名，格式，标签名称

        <el-table-column
          :resizable="false"
          prop="battery"
          :formatter="batteryformatter" 
          label="设备电量"
        ></el-table-column>

定义格式显示，需要使用方法methods框，

  methods: {
    //电量格式-百分号
    batteryformatter(row)
    {
      return row.battery + "%";
     },
}

 2、Vue显示数字改为自定义内容

<el-table-column
          :resizable="false"
          prop="pattern"
          :formatter="patternformatter"
          label="设备模式"
        ></el-table-column>

 定义格式显示的方法，也要使用methods，

 methods: {
//设备模式格式
    patternformatter(row)
    {
      switch (row.pattern) {
        case 1:
          return "在线";
        case 2:
          return "离线";
      }
},
//   方法2，学习新的方法，有助于理解别人代码，使用时注释拿掉
//   patternformatter(row)
//     {
//         return row.pattern == 1
//         ? "在线"
//         : row.pattern == 2
//         ? "离线"
//         : "未知状态";
// },
}

Vue element-ui 数据表头下拉，点击筛选数据

效果预览，点击筛选，鼠标触碰显示蓝色，不过具体大数据参数还是要后端返回操作

<el-table-column
          :resizable="false"
          prop="bindingState"
          label="设备绑定状态"
          :formatter="showBindingStatus"
        >
         <template slot="header" slot-scope="scope"> 
            <el-dropdown trigger="click" size="medium " @command="bindingStateCommand">
              <span style="color:#909399">
                {{ menuText }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in section"
                  :key="index"
                  :command="item"
                >
                  {{ item }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
  //数据栏选择
  data() {
      menuText: '设备绑定状态',
      section: [
        '绑定',
        '未绑定',
      ],
}

  methods: {
    //数据栏-设备绑定状态筛选
    bindingStateCommand(item) { 
      console.log(item,"设备绑定状态筛选=============");
      this.menuText = item
      return row.bindingState = item ;
    },
}