el-table仿照excel

• 1
• 2

<template>
  <div>
    <el-table @cell-click="handleCellDBClick" :data="tabledata" border>
      <!-- 生成列-->
      <el-table-column
        align="center"
        v-for="column in columns"
        :key="column.prop"
        :label="column.columnName"
        :property="column.prop"
      >
        <template slot-scope="scope">
          <!-- 单击时展示input，blur保存-->
          <el-input
            :id="column.prop"
            type="text"
            v-if="scope.row.isEdit === column.prop"
            v-model="scope.row[column.prop]"
            @blur="save(scope)"
          />
          <span v-else :class="[scope.row.id ? '' : 'summary']">{{
            scope.row[column.prop]
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <!--分页器-->
    <el-pagination
      @current-change="page"
      background
      layout="prev, pager, next"
      :prev-text="'上一页'"
      :next-text="'下一页'"
      :page-size="6"
      :total="12"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 12,
      tabledata: [
        {
          id: 1,
          name: "张三",
          entrytime: "2022-07-31",
          education: "本科",
          role: "学生",
          username: "23520981",
          password: "123456",
        },
        {
          id: 2,
          name: "李四",
          entrytime: "2024-07-01",
          education: "硕士",
          role: "职员",
          username: "23520981",
          password: "123456",
        },
        {
          id: 3,
          name: "王五",
          entrytime: "2004-01-31",
          education: "本科",
          role: "学生",
          username: "23520981",
          password: "123456",
        },
        {
          id: 4,
          name: "赵六",
          entrytime: "2012-12-12",
          education: "硕士",
          role: "教职工",
          username: "23520981",
          password: "123456",
        },
      ],
      //	定义字段
      columns: [
        {
          columnName: "序号",
          prop: "id",
        },
        {
          columnName: "姓名",
          prop: "name",
        },
        {
          columnName: "入职时间",
          prop: "entrytime",
        },
        {
          columnName: "学历",
          prop: "education",
        },
        {
          columnName: "角色",
          prop: "role",
        },
        {
          columnName: "用户名",
          prop: "username",
        },
        {
          columnName: "密码",
          prop: "password",
        },
      ],
      oldinfo: "",
    };
  },

  methods: {
    page(val) {
      this.$message({ message: `当前页: ${val}`, type: "success" });
    },
    handleCellDBClick(row, column, cell, event) {
      this.oldinfo = row[column.property];
      const columnName = column.property;
      const unEditColumns = ["id"];
      //如果点击的是序号这一列，则提示不可编辑
      if (unEditColumns.includes(columnName)) {
        return this.$message({ message: "当前列不可编辑", type: "error" });
      }
      //设置isEdit属性
      this.$set(row, "isEdit", columnName);
      this.$nextTick(() => {
        //input标签获取焦点
        document.getElementById(columnName).focus();
      });
    },
    save({ row, column }, val, eventStr) {
      this.oldinfo = row[column.property];
      //数据复位，此时input隐藏，展示span
      this.$set(row, "isEdit", null);
      //调用后台接口保存数据
      //     ...
    },
  },
};
</script>
<style></style>

显示代码 复制代码 复制代码

筛选关键字

关键字:

<template>
  <div>
    <div class="filter_header">
      <span class="font">关键字:</span>
      <el-input style="width: 260px;" v-model="keyWorld" clearable placeholder="请输入关键字"></el-input>
    </div>
    <el-table :data="tableData" style="width: 100%;margin-top: 10px;">
      <el-table-column prop="address" label="地址">
        <template slot-scope="scope">
          <span v-html="showDate(scope.row.address)"></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableKeyWord',
  data() {
    return {
      keyWorld: '',
      tableData: [
        { address: '上海市普陀区金沙江路 1511 弄' },
        { address: '上海市普陀区金沙江路 1512 弄' },
        { address: '上海市普陀区金沙江路 1513 弄' },
      ],
    };
  },
  methods: {
    showDate(val) {
      if (val.indexOf(this.keyWorld) !== -1 && this.keyWorld !== '') {
        return val.replace(
          this.keyWorld,
          '<font color="#f00">' + this.keyWorld + '</font>'
        );
      } else {
        return val;
      }
    },
  },
};
</script>

<style>
.filter_header {
  display: flex;
  flex-direction: row;
}
.font {
  color: #909399;
  width: 90px;
  height: 35px;
  line-height: 35px;
}
</style>

显示代码 复制代码 复制代码

树形数据表格