elementui表格单元格加点击详解

一、elementui表格单元格颜色

在elementui中，我们可以通过设置单元格的style样式来改变单元格的颜色，这个样式可以直接在表格的columns中配置。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      :style="{backgroundColor: '#F2F2F2'}">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: '小明',
          age: '18'
        }, {
          name: '小红',
          age: '20'
        }]
      };
    }
  }
</script>

二、elementui表格单元格编辑

elementui表格的每一个单元格都是可编辑的，我们可以通过设置表格的edit-config属性来实现编辑功能。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :edit-config="{editTrigger: 'click', showIcon: true}"
    @edit="handleEdit">
    <el-table-column
      prop="name"
      label="姓名"
      :editable="true">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      :editable="true">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: '小明',
          age: '18'
        }, {
          name: '小红',
          age: '20'
        }]
      };
    },
    methods: {
      handleEdit(row, column, cell, event) {
        console.log(row, column, cell, event);
      }
    }
  }
</script>

三、elementui表格点击行变色

有时候我们需要为表格设置一个点击行变色的交互，elementui提供了这个功能，我们可以通过设置表格的highlight-current-row属性来实现。

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    highlight-current-row>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: '小明',
          age: '18'
        }, {
          name: '小红',
          age: '20'
        }]
      };
    }
  }

四、elementui表格合并单元格选取

有时候我们需要对表格中的某几个单元格进行合并操作，elementui提供了这个功能，我们可以通过设置表格的span-method属性来实现。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      :span-method="setSpan">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          name: '小明',
          age: '18'
        }, {
          name: '小红',
          age: '18'
        }, {
          name: '小李',
          age: '20'
        }]
      };
    },
    methods: {
      setSpan({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 1 && columnIndex === 1) {
          return {
            rowspan: 2,
            colspan: 1
          };
        }
      }
    }
  }