行编辑

行编辑 针对table行进行编辑操作;
Author qinpeng@expservice.com.cn

示例

新增行

<template>
  <div>
    <ht-table
      ref="searchTable"
      ref-table="searchTable"
      :table-head="searchTableHead"
      :table-data="searchTableData"
    >
     <ht-button @click="handleAdd">新增行</ht-button> 
    </ht-table>
  </div>
</template>
<script>
// :table-bar="false"去除table中的刷新及列表显示
// 实际样例时引入字典JS
// import { findDictFromTable } from '@/api/ht.admin';
export default {
  name: 'HtLineEdit', // 要与菜单表中字段component_name一致
  components: {},
  data() {
    return {
      searchTableHead: [
        {
          type: 'action',
          label: '操作',
          content: ['删除'], // 行操作按钮编辑
          action: [
            (row, index) => this.delete(row, index, '200101')
          ]
        },
        {
          label: '账号',
          prop: 'account',
          width: '90px',
          align: 'right'// 设置table的column列对齐方式
        },
        {
          type: 'dic',
          label: '姓名',
          format: [1, 'isDic', 150], // 设置table的编辑列格式
          prop: 'userName',
          dicType: 'e#1001=张三:1002=李四:1003=王五', // 样例字典编写
          // dicType: 't#FUNC-DEPT-DEPTID', //实际编写示例
          // dicRemote: (dicType, query) => findDictFromTable(dicType, query), //调用后台表选类
          cb: (row, field, dicType, label, value) => this.handleDictCB(row, field, value),
          edit: true, // 设置table的column是否可编辑
          width: '90px',
          isreload: true // 设置table的列字典类型是否重新加载
        },
        {
          type: 'dic',
          label: '多选',
          format: [1, 'isDic', 150],
          prop: 'name',
          dicType: 'e#1001=张三:1002=李四:1003=王五',
          cb: (row, field, dicType, label, value) => this.handleDictCB(row, field, value),
          edit: true,
          multiple: true, // 设置table的列字典类型是否多选
          isreload: true
        },
        {
          format: [0, 'isNumber', 6],
          label: '数量',
          prop: 'count',
           width: 90,
          edit: true,
          cellBlur: this.handleCellBlur // 设置table的编辑列失去焦点方法
        },
        {
          type: 'datetime',
          format: [1, 'isDateTime', 30],
          label: '日期',
          prop: 'birthDate',
          dateType: 'datetime',
          edit: true
        },
        {
          label: '商品',
          prop: 'goodsId',
          width: 170,
          // render设置table的column列内容渲染方法
          // scope为作用域可获取table的当前字段value、code等信息
          // style设置单元格样式方法
          // onClick行按钮方法
          render: (scope, content) => {
            var num = 0;
            var value = '';
            if (scope.row.goodsId && scope.row.goodsId.c) {
              var arr = (scope.row.goodsId.c + '').split(',');
              num = arr.length;
            }
            value = '共' + num + '条';
            return (
              <div>
                <el-button
                  type='primary'
                  size='mini'
                  onClick={() => this.handleAddGoods(scope.row, scope.$index)} >增加
                </el-button>
                <el-button
                  type='primary'
                  size='mini'
                  onClick={() => this.handleEditGoods(scope.row, scope.$index)}>查看
                </el-button>
                <span style='display:inline-block;width:200px;margin-left:15px'>{value}</span>
              </div>
            );
          }
        },
        {
          type: 'number',
          label: '数量',
          prop: 'userSn',
          edit: true,
          min: 1,// 设置input的value最小值
          max: 3, // 设置input的value最大值    size	设置input的大小属性
          format: [1, 'isNumberLetter', 30]
        }
      ],
      searchTableData: {}
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.handleSearch2();
    });
  },
  methods: {
    /**
     * @todo:虚拟数据查询方法
     * @author: qinpeng
     * @Date: 2023-05-26 09:28:12
     */
    async handleSearch2(event) {
      try {
        this.searchTableData = {
          'current': 1,
          'pages': 1,
          'size': 10,
          'total': 7,
          'hitCount': true,
          'searchCount': true,
          'orders': [],
          'optimizeCountSql': true,
          'records':
          [{ 'transHash': {}},
            { 'account': '1022', 'userName': '张三', 'rownums': 1 },
            { 'account': '1033', 'userName': '张三', 'rownums': 2 },
            { 'account': '1044', 'userName': '张三', 'rownums': 3 }
          ]
        };
      } catch (e) {
        this.$notify.message(e, 'error');
      }
    },
    /**
     * @todo:表选回调
     * @author: qinpeng
     * @Date: 2023-05-26 09:27:36
     */
    handleDictCB(res, field, value) {
      switch (field) {
        case 'userName':
          // 用户代码赋值
          value.account = res.value;
          // 用户名称赋值
          value.userName = res.label;
          break;
      }
    },
    /**
     * @todo: 行编辑失去焦点回调方法
     * @author: qinpeng
     * @Date: 2023-05-26 09:27:12
     */
    handleCellBlur(event, row, val, prop) {
      // 判断当前数据是否存在值
      if (val)
        if (!isNumber(val)) {
          this.setLogCount(this.logData);
          this.$notify.message('数量只能为正整数并且大于0');
          return false;
        }
    },
    /**
     * @todo:新增行事件
     * @author: qinpeng
     * @Date: 2023-05-26 09:26:54
     */
    async handleAdd() {
      // searchTable当前行ref属性
      this.$refs['searchTable'].createRow();
    },
    /**
     * @todo: 删除行事件
     * @author: qinpeng
     * @Date: 2023-05-26 09:26:26
     */
    async delete(row, index, type) {
      try {
        // searchTable.recordsList当前行数据是否存在值
        if (this.$refs['searchTable'].recordsList && this.$refs['searchTable'].recordsList.length > 0)
          this.$refs['searchTable'].recordsList.splice(index, 1);
      } catch (e) {
        this.$notify.message(e, 'error');
      }
    }
  }
};
</script>

Expand Copy Copy

版本

• v1.0.2