最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

el-table 简单编辑功能

XAMPP案例 admin 2073浏览 0评论
获得的表格数据展示
image.png
第一步:表格数据处理。
将每行数据都添加属性editAble,
每个0与当前行每一列对应;通过修改对应的editAble[i]的值控制编辑可能,0不可编辑,1可编辑
    data.listRemain.forEach( (row,index) => {
       //editAble 数组长度=表格列数
      //可new一个数组,使用editAble.fill(0)填充0,
      row.editAble = [0,0,0,0,0,0,0,0,0];
    });
第二步:el-table 列的scope处理。
这里是金额列的编辑,所以使用了el-input-number ,可根据需要换成el-input。
  <el-table
    :data=”listRemain”
    highlight-current-row>
     <el-table-column
      label=”年初余额”
      show-overflow-tooltip>
       <template slot-scope=”scope”>
              <el-input-number
                clearable
                :precision=”2″ //小数位精度
                :controls=”false”
                v-model=”scope.row.balance”
                :key=”scope.row.chr_id”
              //根据editAble ,判断是否显示编辑框,edit[0]=1时显示,0是列的index,从0开始
                v-if=”(scope.row.editAble || [])[0]”
                v-focus//获取焦点,若不生效可改为v-el-focus,定义方法见文章最后“其他”
                @focus=”$event.target.select()”
                @blur=”getValue(scope.row, 0,’balance’)”>
              </el-input-number>
              <div class=””
                   v-else //editAble[0]=0时编辑框隐藏
                  //双击单元格,将单元格对应列的editAble[0]的值改为1,则编辑框el-input-number 即可显示
                   @dblclick=”cellClick(scope.row, 0, ‘balance’)”>
                    //formatMoney是金额格式化方法
                    {{ scope.row.balance | formatMoney(scope.row.balance,0) }}
              </div>
       </template>
    </el-table-column>
  </el-table>
第三步:相关js方法
<script>
 export default {
        data(){
            return{
              listRemain:[],
            }
        },
        directives: {
            focus: {// v-focus指令的定义
              inserted: function (el) {
                  $(el).find(‘input’).focus()
              }
            }
        },
        methods:{
            //编辑事件(双击触发)
           cellClick(row, index,prop){
              this.inputAbstract(row.editAble,index)
            },
            //将对应列的editAble[index]值改为1
            inputAbstract(editAble, index) {
                editAble.splice(index, 1, 1)
            },
           // 隐藏编辑框
            getValue(row, index,prop) {
                var vm = this;
                setTimeout(vm => {
                     //将对应列的editAble[index]值改为0
                    row.editAble.splice(index, 1, 0);
                }, 150)
          },
        }
}
</script>
其他种类编辑示例:
动态列
input带按钮,可进行点击按钮跳出选择模态框树等操作
image.png
        <el-table-column
                          v-for=”(col,index) in detailTableHead”
                          :key=’col.prop’
                          :prop=”col.prop”
                          :label=”col.label”  >
            <template slot-scope=”scope”>
              <!– 基本要素 –>
              <el-input
                    v-focus
                    :trigger-on-focus=false
                    v-if=”(scope.row.editAble || [])[index] “
                    v-model=”scope.row[col.prop]”
                    @blur=”getValue(scope.row, index, col.prop)”>
                    <el-button slot=”append”  icon=”el-icon-more” @click=”getEle(col)”></el-button>
              </el-input>
              <!– 不可编辑 要素 –>
              <div
                    v-else
                    v-text=”scope.row[col.prop]”
                    @dblclick=”cellClick(scope.row, index, col.prop)”>
              </div>
            </template>
        </el-table-column>
其他:
import Vue from ‘vue’
// 注册一个全局自定义指令 `v-el-focus`, 用于element-ui input聚焦,可写在main.js里
Vue.directive(‘el-focus’, {
  inserted: function(el) {
    // 聚焦元素
    Vue.nextTick(function() {
      el.getElementsByTagName(‘input’)[0].focus()
    })
  }

转载请注明:XAMPP中文组官网 » el-table 简单编辑功能

您必须 登录 才能发表评论!