vue element table

cell-click  当某个单元格被点击时会触发该事件  row, column, cell, event

 
 <template>
  <div class="wraper">
    <el-table
      @selection-change="selectChange"
      ref="singleTable"
      :data="tableData"
      @cell-click="tabClick"
      style=" 100%"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      highlight-current-row
      @current-change="handleCurrentRowChange"
    >
      <el-table-column
        type="index"
        label="序号"
        fixed
        width="50"
        :index="indexMethod"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <template v-for="(item, idx) in option">
        <el-table-column
          :prop="item"
          :key="idx"
          :label="formatter(item)"
          min-width="120"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <template v-if="item === 'id'">
              <el-tag type="primary" disable-transitions>{{
                scope.row[item]
              }}</el-tag>
            </template>


            <template v-else-if="item === 'channel'">
              <el-input
                v-if="scope.row.id === tabClickIndex && item === tabClickLabel"
                v-model="scope.row[item]"
                maxlength="300"
                @blur="inputBlur"
              />
              <p class="value" v-else>
                {{ scope.row[item] }}
              </p>
            </template>
            <template v-else-if="item === 'status'">
              <!-- 0待财务确认,1财务确认,2技术主管确认,3项目完成 -->
              <template v-if="scope.row[item] == 0">
                <el-tag disable-transitions> 待财务确认 </el-tag>
              </template>
              <template v-else-if="scope.row[item] == 1">
                <el-tag disable-transitions type="info"> 财务确认 </el-tag>
              </template>
              <template v-else-if="scope.row[item] == 2">
                <el-tag disable-transitions type="warning">
                  技术主管确认
                </el-tag>
              </template>
              <template v-else-if="scope.row[item] == 3">
                <el-tag disable-transitions type="success"> 项目完成 </el-tag>
              </template>
              <template v-else>
                <el-tag disable-transitions type="danger"> -- </el-tag>
              </template>
            </template>
            <template v-else-if="item === 'take_time'">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row[item]"
                placement="top"
              >
                <el-tag type="success">
                  {{ scope.row[item] | formatTime }}
                </el-tag>
              </el-tooltip>
            </template>
            <template v-else-if="item === 'admin_name'">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row[item]"
                placement="top"
              >
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <el-avatar
                    icon="el-icon-user-solid"
                    style="margin-right: 10px"
                  ></el-avatar>
                  {{ scope.row[item] }}
                </div>
              </el-tooltip>
            </template>
            <template v-else>
              <!-- <el-input
                v-if="scope.row.isSelected"
                v-model="scope.row[item]"
                @focus="focusEvent(scope.row)"
                @blur="blurEvent(scope.row)"
                v-focus
              ></el-input>
              <p @click="cellClick(scope.row)" v-else class="value">{{scope.row[item]}}</p> -->



              <el-input
                v-if="scope.row.id === tabClickIndex && item === tabClickLabel"
                v-model="scope.row[item]"
                maxlength="300"
                @blur="inputBlur"
              />
              <p class="value" v-else>
                {{ scope.row[item] }}
              </p>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>



    <el-pagination
      style="margin-top: 30px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="dataForm.page"
      :page-sizes="pageSizes"
      :page-size="dataForm.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-backtop target=".wraper"></el-backtop>
  </div>
</template>



  <script>
export default {
  data() {
    return {
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: "", // 当前点击的列名
      //主体数组
      tableData: [],
      loading: true,
      option: [], //头
      oldValue: null,
      pageSizes: [5, 10, 20, 100, 200, 300, 400],
      //分页相关
      total: 0, //一共多少条
      dataForm: {
        page: 1, //当前页: ${val}
        pagesize: 10, //每页 ${val} 条
      },
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },
  created() {
    this.getSearchList();
  },
  mounted() {},
  filters: {
    formatTime: function (value) {
      //date1和date2是2002-12-18格式
      var date1Str = value.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
      //根据年 . 月 . 日的值创建Date对象
      var date1Obj = new Date(date1Str[0], date1Str[1] - 1, date1Str[2]);
      // var date2Str = date2.split("-");
      var date2Obj = new Date();
      var t1 = date1Obj.getTime();
      var t2 = date2Obj.getTime();
      var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
      var minusDays = Math.floor((t2 - t1) / dateTime); //计算出两个日期的天数差
      var days = Math.abs(minusDays); //取绝对值
      if (days > 30) {
        if (days > 365) {
          if (days > 36500) {
            return (
              Math.floor(days / 36500) +
              "世纪" +
              Math.floor((days % 36500) / 365) +
              "年前"
            );
          }
          return (
            Math.floor(days / 365) +
            "年" +
            Math.floor((days % 365) / 30) +
            "月前"
          );
        }
        return Math.floor(days / 30) + "月前";
      }
      return days + "天前";
    },
  },
  methods: {
    tabClick(row, column, event, cell) {
      // console.log(row)
      // console.log(column)
      // console.log(event)
      // console.log(cell)



      if (column.label) {
        // let that=this;
        this.tabClickIndex = row.id;
        this.tabClickLabel = column.property;
        this.oldValue = row[column.property];
        // console.log(this.tabClickIndex, this.tabClickLabel);
      } else {
        this.tabClickIndex = null;
        this.tabClickLabel = "";
      }
    },
    //输入完成
    inputBlur(row, event, column) {
      // console.log(row,event,column);
      console.log(row.target.value, this.tabClickIndex, this.tabClickLabel);
      if (row.target.value !== this.oldValue) {
        // 调用修改名称接口
        this.$api
          .getEdit({
            id: this.tabClickIndex,
            paramName: this.tabClickLabel,
            value: row.target.value,
          })
          .then((res) => {
            if (res.data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1000,
              });
            }
          });
      }
      this.tabClickIndex = null;
      this.tabClickLabel = "";
    },
    //当选择项发生变化时会触发该事件 element
    selectChange(e) {
      console.log(e);
    },
    //得到焦点
    focusEvent(row) {
      row.oldName = row.name;
    },
    //失去焦点
    blurEvent(row) {
      row.isSelected = !row.isSelected;
      if (row.name !== row.oldName) {
        // 。。。此处代码省略（调用修改名称接口）
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      }
    },
    cellClick(row) {
      row.isSelected = !row.isSelected;
    },
    formatter(item) {
      let state = {
        name: "工单标题",
        id: "ID",
        channel: "工单来源(类型)",
        admin_name: "销售",
        take_time: "接单时间",
        status: "状态",
      };
      if (Object.keys(state).indexOf(item) > -1) {
        return state[item];
      }
      return item;
    },
    getSearchList() {
      this.loading = true;
      this.$api.getList(this.dataForm).then((res) => {
        console.log(res.data);
        if (this.option.length === 0) {
          this.option = Object.keys(res.data.data[0]);
        }
        this.total = Number(res.data.total);
        this.tableData = res.data.data.map((item) => {
          return { ...item, isSelected: false };
        });
        this.$nextTick(() => {
          setTimeout(() => {
            this.loading = false;
          }, 500);
        });
      });
    },
    handleCurrentRowChange(val) {
      // console.log(`${val}行`);
      // console.log(val);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let oldSize = this.dataForm.pagesize; //之前
      this.dataForm.pagesize = val;
      if (this.dataForm.page * oldSize <= this.total) {
        //         this.dataForm.page*oldSize 之前浏览到的最后的位置
        if (val >= this.dataForm.page * oldSize) {
          this.dataForm.page = 1;
        } else {
          this.dataForm.page = Math.ceil((this.dataForm.page * oldSize) / val);
        }
      } else {
        //  this.dataForm.page=1
        this.dataForm.page = Math.ceil(this.total / val); //最后 一页
      }



      this.getSearchList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.dataForm.page = val;
      this.getSearchList();
    },



    indexMethod(index) {
      return (this.dataForm.page - 1) * this.dataForm.pagesize + index + 1;
    },
  },
};
</script>
<style  scoped>
html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wraper {
  height: 100vh;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
}
* {
  box-sizing: border-box;
}
.value {
  min-height: 30px;
  min- 100px;
  background: inherit;
}
p:empty {
  border: 1px solid #ccc;
}
</style>

 

 

 <template>
  <div class="wraper">
    <el-table
      @selection-change="selectChange"
      ref="singleTable"
      :data="tableData"
      style=" 100%"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      highlight-current-row
      @current-change="handleCurrentRowChange"
    >
      <el-table-column
        type="index"
        label="序号"
        fixed
        width="50"
        :index="indexMethod"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <template v-for="(item, idx) in option">
        <el-table-column
          :prop="item"
          :key="idx"
          :label="formatter(item)"
          min-width="120"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            <template v-if="item === 'id'">
              <el-tag type="primary" disable-transitions>{{
                scope.row[item]
              }}</el-tag>
            </template>
            <template v-else-if="item === 'channel'">
              <el-tag type="primary" disable-transitions>{{
                scope.row[item]
              }}</el-tag>
            </template>
            <template v-else-if="item === 'status'">
              <!-- 0待财务确认,1财务确认,2技术主管确认,3项目完成 -->
              <template v-if="scope.row[item] == 0">
                <el-tag disable-transitions> 待财务确认 </el-tag>
              </template>
              <template v-else-if="scope.row[item] == 1">
                <el-tag disable-transitions type="info"> 财务确认 </el-tag>
              </template>
              <template v-else-if="scope.row[item] == 2">
                <el-tag disable-transitions type="warning">
                  技术主管确认
                </el-tag>
              </template>
              <template v-else-if="scope.row[item] == 3">
                <el-tag disable-transitions type="success"> 项目完成 </el-tag>
              </template>
              <template v-else>
                <el-tag disable-transitions type="danger"> -- </el-tag>
              </template>
            </template>
            <template v-else-if="item === 'take_time'">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row[item]"
                placement="top"
              >
                <el-tag type="success">
                  {{ scope.row[item] | formatTime }}
                </el-tag>
              </el-tooltip>
            </template>
            <template v-else-if="item === 'admin_name'">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row[item]"
                placement="top"
              >
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <el-avatar
                    icon="el-icon-user-solid"
                    style="margin-right: 10px"
                  ></el-avatar>
                  {{ scope.row[item] }}
                </div>
              </el-tooltip>
            </template>
            <template v-else>
              <el-input
                v-if="scope.row.isSelected"
                v-model="scope.row.name"
                @focus="focusEvent(scope.row)"
                @blur="blurEvent(scope.row)"
                v-focus
              ></el-input>
              <p @click="cellClick(scope.row)" v-else class="value">{{scope.row.name}}</p>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <el-pagination
      style="margin-top: 30px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="dataForm.page"
      :page-sizes="pageSizes"
      :page-size="dataForm.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-backtop target=".wraper"></el-backtop>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      //主体数组
      tableData: [],
      loading: true,
      option: [], //头
      pageSizes: [5, 10, 20, 100, 200, 300, 400],
      //分页相关
      total: 0, //一共多少条
      dataForm: {
        page: 1, //当前页: ${val}
        pagesize: 10, //每页 ${val} 条
      },
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },
  created() {
    this.getSearchList();
  },
  mounted() {},
  filters: {
    formatTime: function (value) {
      //date1和date2是2002-12-18格式
      var date1Str = value.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
      //根据年 . 月 . 日的值创建Date对象
      var date1Obj = new Date(date1Str[0], date1Str[1] - 1, date1Str[2]);
      // var date2Str = date2.split("-");
      var date2Obj = new Date();
      var t1 = date1Obj.getTime();
      var t2 = date2Obj.getTime();
      var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
      var minusDays = Math.floor((t2 - t1) / dateTime); //计算出两个日期的天数差
      var days = Math.abs(minusDays); //取绝对值
      if (days > 30) {
        if (days > 365) {
          if (days > 36500) {
            return (
              Math.floor(days / 36500) +
              "世纪" +
              Math.floor((days % 36500) / 365) +
              "年前"
            );
          }
          return (
            Math.floor(days / 365) +
            "年" +
            Math.floor((days % 365) / 30) +
            "月前"
          );
        }
        return Math.floor(days / 30) + "月前";
      }
      return days + "天前";
    },
  },
  methods: {
    //当选择项发生变化时会触发该事件 element
    selectChange(e) {
      console.log(e);
    },
    //得到焦点
    focusEvent(row) {
      row.oldName = row.name;
    },
    //失去焦点
    blurEvent(row) {
      row.isSelected = !row.isSelected;
      if (row.name !== row.oldName) {
        // 。。。此处代码省略（调用修改名称接口）
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      }
    },
    cellClick(row) {
      row.isSelected = !row.isSelected;
    },
    formatter(item) {
      let state = {
        name: "工单标题",
        id: "ID",
        channel: "工单来源(类型)",
        admin_name: "销售",
        take_time: "接单时间",
        status: "状态",
      };
      if (Object.keys(state).indexOf(item) > -1) {
        return state[item];
      }
      return item;
    },
    getSearchList() {
      this.loading = true;
      this.$api.getList(this.dataForm).then((res) => {
        console.log(res.data);
        if (this.option.length === 0) {
          this.option = Object.keys(res.data.data[0]);
        }
        this.total = Number(res.data.total);
        this.tableData = res.data.data.map((item) => {
          return { ...item, isSelected: false };
        });
        this.$nextTick(() => {
          setTimeout(() => {
            this.loading = false;
          }, 500);
        });
      });
    },
    handleCurrentRowChange(val) {
      // console.log(`${val}行`);
      console.log(val);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let oldSize = this.dataForm.pagesize; //之前
      this.dataForm.pagesize = val;
      if (this.dataForm.page * oldSize <= this.total) {
        //         this.dataForm.page*oldSize 之前浏览到的最后的位置
        if (val >= this.dataForm.page * oldSize) {
          this.dataForm.page = 1;
        } else {
          this.dataForm.page = Math.ceil((this.dataForm.page * oldSize) / val);
        }
      } else {
        //  this.dataForm.page=1
        this.dataForm.page = Math.ceil(this.total / val); //最后 一页
      }

      this.getSearchList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.dataForm.page = val;
      this.getSearchList();
    },

    indexMethod(index) {
      return (this.dataForm.page - 1) * this.dataForm.pagesize + index + 1;
    },
  },
};
</script>
<style  scoped>
html,
body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wraper {
  height: 100vh;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
}
* {
  box-sizing: border-box;
}
.value {
  min-height: 30px;
  min- 100px;
  background: inherit;
}
p:empty
{
border: 1px solid #ccc;
}
</style>

cell-click

当某个单元格被点击时会触发该事件

row, column, cell, event