美文网首页
vue Element-ui 表格多选 修改选中行背景色

vue Element-ui 表格多选 修改选中行背景色

作者: 醉笙情丶浮生梦 | 来源:发表于2019-03-02 19:52 被阅读0次
    <el-table
      v-show="res"
      border
      ref="multipleTable"
      :data="projectList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select="handleSelection"
      @row-click="clickRow"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="30"></el-table-column>
      <el-table-column label="ID" align="center" prop="id">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="项目名称" align="center" prop="name">
        <template slot-scope="scope">{{scope.row.name}}</template>
      </el-table-column>
      <el-table-column label="征收范围" align="center" prop="levy_scope">
        <template slot-scope="scope">{{scope.row.levy_scope}}</template>
      </el-table-column>
      <el-table-column label="拆迁公司" align="center" prop="actuator">
        <template slot-scope="scope">{{scope.row.actuator}}</template>
      </el-table-column>
    </el-table>
    
    .el-table >>> .warning-row {
      background-color: #f5f7fa;
    }
    

    点击选框 点击整行 都可以变色

    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("选择框发生变化", val);
    },
    handleSelection(val, row) {
    
      // 表单绑定的数据
      this.projectList.forEach((item, i) => {
        if (item.id == row.id) {
          /* console.log(this.numbers.indexOf(i)) */
          if (this.numbers.indexOf(i) == -1) {
            this.numbers.push(i);
          } else {
            this.numbers.splice(this.numbers.indexOf(i), 1);
          }
        }
      });
    
    },
    // 点击整行选中
    clickRow(row, event, column) {
      this.$refs.multipleTable.toggleRowSelection(row);
    
      this.projectList.forEach((r, i) => {
        if (r.id == row.id) {
          /* console.log(this.numbers.indexOf(i)) */
          if (this.numbers.indexOf(i) == -1) {
            this.numbers.push(i);
          } else {
            this.numbers.splice(this.numbers.indexOf(i), 1);
          }
        }
      });
      
    },
    // 选中背景色
    tableRowClassName({ row, rowIndex }) {
      let color = "";
      this.numbers.forEach((r, i) => {
        if (rowIndex === r) {
          color = "warning-row";
        }
      });
      return color;
    }
    

    参考:https://jsfiddle.net/L5do6L3k/61/

    相关文章

      网友评论

          本文标题:vue Element-ui 表格多选 修改选中行背景色

          本文链接:https://www.haomeiwen.com/subject/fuuyuqtx.html