elementui 表格中单元格自定义功能

客户相让表格的可操作空间变得更大，比如说可以修改表格内容（双击之后出现input），点击某一单元格可以弹窗等等，让一切可以需要的功能再单击单元格中实现。

其实在elementui的官方文档中也可以找到很详细的说明和demo，但是对于新手前端来说还是有些难懂（我自己也是），突然研究透彻之后（也不是透彻，但是用起来比较熟练），记录一下给大家分享，也便于后续自己回顾知识。

1.用法

<el-form-item label="单据编号" prop="userName">
<template slot-scope="scope">
    ....
</template>
</el-form-item>

<el-form-item> 想必已经很熟悉了，就不过多叙述了。这里说一下这个 <template>

省略号处的地方写上你向放上去的内容，组件都可以，比如说一个v-if,v-else判断切换的相对容器，或者是一个普通的div，p标签并给他绑定对应的样式和事件，总之用法很多，我这里给大家举一些我用到的例子。

2.demo

（1）双击单元格变为input，可以让用户在表格上直接更改某个单元格的值

<el-table-column prop="billCode" label="*单据编号" align="center" width="160">
    <template slot-scope="scope">
    <!-- 条件判断如果满足则显示表单，否则默认展示文字 -->
        <el-input v-model="scope.row.billCode" v-if="showInput == `billCode${scope.row.erpDataBillId}`"
            @blur="blurInput(scope.row.erpDataBillId, 'billCode', scope.row.billCode)" v-focus>
        </el-input>
        <p v-else>{{ scope.row.billCode }}</p>
    </template>
</el-table-column>

这里有个前提，就是给单元格绑定双击事件：

 <el-table :data="tableData" @cell-dblclick="tableDbEdit" row-key="erpDataBillId" >

     tableDbEdit(row, column, event) {
        this.showInput = column.property + row.erpDataBillId;
        this.oldData[column.property] = row[column.property];
      },

      async blurInput(id, name, value) {
        console.log(value)
        let obj = {};
        // 判断数据是否有所改变，如果数据有改变则调用修改接口
        if (this.oldData[name] != value) {
          obj[name] = value; //被改变的数据
          // 然后再写调用接口，提交内容的东西就可以了
          console.log("===值改变了");
        }
        this.showInput = "";
      },

双击时满足v-if的条件，显示弹出框，鼠标失去焦点时满足v-else，显示p标签。

效果：

 分别是双击时和鼠标失去焦点时的效果图。

（2）嵌入div

一开始想的有点简单，尝试直接给<el-form-item>添加点击事件（勿喷），后来换了个办法，

给模板里加个div绑定一下就行了

<el-table-column prop="audit" label="审核状态" align="center">
    <template slot-scope="scope">
        <div @click="examineEvent(scope.row.audit)" style="cursor:pointer;width:80px;height: 50px;line-height: 50px;">
            <p v-if="scope.row.audit==0" style="color:orange;">未审核</p>
            <p v-if="scope.row.audit==1" style="color:green;">已通过</p>
            <p v-if="scope.row.audit==2" style="color:red;">未通过</p>
        </div>
     </template>
</el-table-column>

 这里数据的状态后台给我的是0，1，2，我在表格里转换成了三种状态：未审核，已通过，未通过。我知道还有对性能更友好的很多封装的方法和其他的办法搞定这个需求，这里我只是为了说明此文的重点。还有现在在赶工，处理这些细节肯定要用最快的速度，不然拖时间不能按时完成GG。还有这个更好理解一点吧....

总之template里可以随心所欲的放，放开你的想象力加油干吧。

ps：顺便贴两个小功能

1.表格自己生成序号，不需要用后端给你的标识符，客户用的时候看的方便点吧。。（其实没啥用，但是肯定有人用的到，一百个客户一百个需求）

      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>

2.elementui 表格多选框实现单选

      selectBillCode(val) {
        console.log(val);
        if (val.length > 1) {
          this.$refs.tb.clearSelection();
          this.$refs.tb.toggleRowSelection(val.pop());
        } else {
          return;
        }
      }