boostrap-table行内编辑官方推荐解决方案bootstrap-table-editable、bootstrap-editable

发布时间：2020-07-24 15:21:04 作者：Mos 阅读量：3055

效果预览：

文档地址：

插件bootstrap-table-editable官方文档：

https://examples.bootstrap-table.com/#extensions/editable.html

中文：https://www.bootstrap-table.com.cn/doc/extensions/editable

插件x-editable官方文档：

http://vitalets.github.io/x-editable/docs.html#editable

部分代码参考：

      clickEdit: true,
      columns: [{
        checkbox: true
      },
        {
          title: "名称",
          field: "name",
          editable: {
            type: 'text',
            escape: false,
            title: '名称',
            validate: function (v) {
              if (!v) {
                return '名称不能为空';
              }
            }
          }
        },
        {
          title: "月数",
          field: "expireMonth",
          editable: {
            type: 'text',
            escape: false,
            title: '月数',
            validate: function (v) {
              if (v) {
                if (isNaN(v)) return '月数必须是数字';
              }
            }
          }
        },
        {
          title: "价格",
          field: "price",
          editable: {
            type: 'text',
            escape: false,
            title: '价格',
            validate: function (v) {
              if (!v) return '价格不能为空';
              if (isNaN(v)) return '价格必须是数字';
            }
          }
        },
        {
          title: "状态",
          field: "status",
          editable: {
            type: 'select',
            title: '状态',
            source: [{"value":1,"text":"启用"},{"value":0,"text":"禁用"}],
            inputclass:"tableselect",
            validate: function (v) {
              if (!v) {
                return '状态必选';
              }
            }
          }
        },
      ]

赏