使用avue的Crud组件为某行单独设置样式并给点击单个单元格设置事件

 

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

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

 给组件添加: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 === "事业部") {
        // 逻辑代码
      }
    },
  },