vue 怎么实现图中效果

Question

怎么实现图中的效果，在表格当中实现选择的效果，有哪位做过啊.elementui里面的el-table是否可以实现呢

Answer 1

这个用div就可以做，非要用el-table 就只能这样

<template>
  <div>
    <el-table :data="tableData" :show-header="false">
      <el-table-column>
        <template slot-scope="scope">
          <el-input v-model="scope.row.column1"></el-input>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-input v-model="scope.row.column2"></el-input>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-input v-model="scope.row.column3"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { column1: '', column2: '', column3: '' },
        { column1: '', column2: '', column3: '' },
        { column1: '', column2: '', column3: '' },
      ],
    };
  },
};
</script>