当前位置：首页 > news >正文

element-ui 表格点击选中

news 来源：原创 2025/5/20 2:16:11

element-ui 表格点击选中

复制element ui 表格

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

在el-table里面加入 highlight-current-row 意思就是在每一个tr中添加一个class类
全局覆盖这个样式

 .danger-content-info .el-table__body-wrapper .el-table__body  .current-row {
            background: url("../images/table_tr_g.png") no-repeat center/100% 55px !important;
        }