element-ui踩坑

element-ui踩坑

1.使用websocket给前端vuex中传值并将vuex中的值实时渲染到页面表格

在element-ui中提供的表格样式中,默认以:data="tableData"的形式传入表格数据,其中tableData在vue中以data函数的方式return出来,例如:

      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }

现在要接受vuex中动态传入的值,则需要将vuex中值写入computed和watch中作为监听使用,例如:

  computed: {
    listmsg() {
      return this.$store.state.user.msg;
    }
  },
  watch: {
    listmsg(val, oldval) {
      this.tableData[0].address = oldval[0];
      this.tableData[1].address = oldval[1];
      this.tableData[2].address = oldval[2];
      this.tableData[3].address = oldval[3];
    }
  }

如上,computed中接受了vuex中的msg值

注意:此处vuex写了模块user,所以要在state中拿值必须从this.$store.state.user拿值

然后用拿到的值,在watch中监听值得改变,进行实时的渲染

2.使用element-ui中的表格斑马纹,边框

由于在element-ui中使用表格元素会有默认的hover事件(放上去会变色)

在这里可以看到,表格第一项触发了hover事件(鼠标截图时在第一行上面放着)

为了给表格添加斑马纹

在element-ui的官方文档中也给出了详细的说明:

stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。

边框也是一样的

在element-ui中给表格添加边框:

默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

3.使用element-ui中的带状态表格栏

在使用element-ui中的带状态表格栏的时候,我觉得和斑马纹,边框对比起来应该是一样的,没有什么难度,然后我就根据官方文档将代码C+V进我的代码

官方文档:

<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>

在methods中需要把逻辑写好

然而在使用了带状态表格栏后没有效果

谷歌的调试工具也没有报错

在网上找了一大圈后,找到解决方案:

1.去除style中的scoped

因为在element-ui中row-class-name、row-style、cell-class-name等属性要想生效必须使用全局class才能生效。因为之前的代码都是在组件中编写的，所以去除中的scoped即可该组件中的样式变为全局属性。

2.去除斑马纹属性

在element-ui中,斑马纹属性与带状态表格栏属性冲突

即把stripe属性修改为flase,或者直接在表格标签中删除stripe

即最后的的以websocket发送数据获取到的数据动态展现在vue搭建的前端框架的element-ui的表格中的代码如下

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      v-loading="loading"
      :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>
    <router-link to="/">第一组数据</router-link>
  </div>
</template>


<script>
import { mapActions } from "vuex"; // 引入vuex中各个模块的actions
import { mapState } from "vuex";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "数据处理中"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "数据处理中"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "数据处理中"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "数据处理中"
        }
      ],
      loading: true
    };
  },
  methods: {
    ...mapActions({ getmsg: "getmsg" }),
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1 && this.tableData[1].address== "数据处理中") {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
  },
  computed: {
    listmsg() {
      return this.$store.state.user.msg;
    }
  },
  watch: {
    listmsg(val, oldval) {
      this.tableData[0].address = oldval[0];
      this.tableData[1].address = oldval[1];
      this.tableData[2].address = oldval[2];
      this.tableData[3].address = oldval[3];
      this.loading = false;
    }
  }
};
</script>


<style>
.el-table .warning-row {
  background: rgb(236, 145, 145);
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>

数据为模拟数据,第四行变色为官方文档自带变色,第二行变色为我写的文档变色,我在此表格中加入了loading组件,意为数据尚未加载时先不触发

完整表格效果图如下

欢迎关注我的公众号一起学习前端知识:

我的个人博客地址:jacob的个人博客