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
          };
        }
      }
    }
  }