ElementUI使用总结

首先声明，我这总结的官网都有，只是将自己使用时遇到的问题，重新记录一下，官网地址：https://element.eleme.cn/

1、表格内指定行数给定不同样式（类似于隔行变色，也能叫指定行数不同颜色展示），如下图

代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

使用时，自己遇到的问题：

问题一：style属性，渲染不上去，无效。最终找到原因，如下图：

问题二：颜色样式渲染上去了，明明设置的连续N行变色，但是只有单行数生效，解决方式如下图：

2、如果想要在表格中设置某一行不显示，想要通过show：true 或者 false来控制可以这么解决，template用处多多，还需要多多学习，如下代码

<!--利用templet标签来实现，标红的v-if地方进行判断 -->
<template v-for="(node, index) in table.cols">
        <el-table-column
          align="center"
          v-if="node.show !== false"
          :key="index"
          :prop="node.index"
          :label="node.label"
          :sortable="node.sort === true || node.sort === 'custom'"
        >
          <template slot-scope="scope">
            <span v-if="node.slot == 'deviceType'">{{
              scope.row[node.index] == 0 ? "主机" : "备机"
            }}</span>
            <span v-else-if="node.slot == 'manage_user'">
              {{
                scope.row.manage_user + "(" + scope.row.manage_user_real + ")"
              }}
            </span>
            <span v-else-if="node.slot == 'manage_user2'">
              {{
                scope.row.manage_user2 + "(" + scope.row.manage_user2_real + ")"
              }}
            </span>
            <span v-else-if="node.slot == 'same_zone'">{{
              scope.row[node.index] == 1 ? "是" : "否"
            }}</span>
            <span v-if="node.slot == 'type'">{{
              getDeviceTypeName(scope.row[node.index])
            }}</span>
            <span v-else-if="node.slot == undefined">{{
              scope.row[node.index]
            }}</span>
          </template>
        </el-table-column>
      </template>

data数据如下，标红处的show

data() {
    return {

      table: {
        sortOrder: "",
        sortColumn: "",
        height: 500,
        cols: [
          { index: "name", label: "设备名称", sort: true },
          { index: "ip", label: "设备IP", sort: true },
          {
            index: "type",
            label: "设备类型",
            editType: "select",
            slot: "type",
            couponSelected: "",
            sort: true,
            list: []
          },
          {
            label: "所属机构",
            index: "orgname",
            editType: "select",
            show: false
          }
        ],
        page: {
          count: 0,
          current: 1,
          size: 30
        },
        data: [], //用户信息
        filterText: "",
        couponSelected: ""
      }
    };
  },

暂时这么多，未完待续...