最近写的一个小功能
在这里插入图片描述
将姓名一例字体换成蓝色,,并且点击实现跳转
给某一类添加样式
1.在avue-crud组件中添加cell-class-name属性

<avue-crud
      :data="data"
      :option="option"
      :page.sync="page"
      :cell-class-name="addClass"
      @cell-click="pageto"
    ></avue-crud>
    /**
     * @description: 单元格名字添加样式
     */
    addClass({ row, column, rowIndex, columnIndex }) {
       console.log(row);
       console.log(column);
       console.log(rowIndex);
       console.log(columnIndex);
      if (columnIndex === 2) {
        return "cell-color";    // cell-blue就是添加的类名,添加完之后记得设置样式
      }
    },
    /**
     * @description: 点击名字进行跳转
     */
    pageto(row, column, cell, event) {
      if (column.label == "姓名") {         
        this.$router.push({
          name: "teacherDetail",
          params: {
            id: row.id,
          },
        });
      }
    },
.cell-color {
  color: #409eff !important;
  cursor: pointer;
}

补充
控制台依次输出row,column,rowIndex,columnIndex
在这里插入图片描述
修改样式遇到权重问题(同elementUi)
method1:


<style lang="scss" scoped>
/deep/ .avue-crud__menu {
  display: none;
}

method2:

<style lang="scss" scoped>
::v-deep .el-divider--vertical {
  height: auto;
}
</style>

Logo

前往低代码交流专区

更多推荐