如图,我们想为单独的一行添加一个颜色,并且点击这个单元格可以触发事件。

第一步:为某一行添加单独样式。

 给组件添加:cell-style="cellStyle"属性:

:cell-style="cellStyle"

在methods添加cellStyle事件:

// 给第2列的单元格单独设置样式(从0开始)
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 1) {
        return {
          color: "#409eff",
          cursor: "pointer",
        };
      }
    },

以上,我们就给第二行添加了一个蓝色字体的样式。

第二步:点击蓝色字体触发弹窗事件。

 给组件添加@cell-click="clickCell"事件:

@cell-click="clickCell"

在methods中定义这个事件:

// 点击第2列的单元格
    clickCell(row, column, cell, event) {
      if (column.label === "事业部") {
        this.isDialog = true;
      }
    },

以上,我们就完成了为单独的单元格添加事件的目的。

对于函数传递过来的参数我们可以一一打印出来看看结果,选择自己需要的数据进行逻辑处理。

总结:

在组件中添加属性和事件:

<avue-crud :cell-style="cellStyle" @cell-click="clickCell"></avue-crud>

在methods中定义事件:

methods: {
    // 给第2列的单元格单独设置样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 1) {
        return {
          color: "#409eff",
          cursor: "pointer",
        };
      }
    },
    // 点击第2列的单元格
    clickCell(row, column, cell, event) {
      if (column.label === "事业部") {
        // 逻辑代码
      }
    },
  },

Logo

前往低代码交流专区

更多推荐