md-test2233

vue-components-tpl

介绍

组件发布模版

md 🛠

add User

npm adduser --registry  http://144.34.255.196:4873/

Use npm source

nrm add Verdaccio  http://144.34.255.196:4873/
nrm use Verdaccio

Install

npm install md -S

Use md

import md from 'md'
Vue.use(md)

mod-filter

template

<mod-filter ref="modFilter" :datas="datas" @query="getData">
  <template slot="status" slot-scope="scope">
      <span>{{scope.value.status?'启用':'禁用'}}</span>
  </template>
  <template slot="lastBtn">
    <el-form-item label="">
      <el-button size="mini" type="primary" @click="edit(0)">新增</el-button>
    </el-form-item>
  </template>
  <template slot="oper" slot-scope="scope">
      <el-button v-if="!scope.value.status" size="mini" type="text" @click="lock(scope.value,true)">启用</el-button>
      <el-button v-else size="mini" type="text" @click="lock(scope.value,false)">禁用</el-button>
      <el-button size="mini" type="text" @click="edit(scope.value)">编辑</el-button>
      <el-button size="mini" type="text" @click="remove(scope.value)">删除</el-button>
  </template>
</mod-filter>

script

data(){
  return{
    params: {
      page: 1
    },
    datas: {
      table: {
        selection: false,
        loading: false,
        oper: true,
        colList: [{
            label: '名称',
            key: 'name',
          },
          {
            label: '备注',
            key: 'remarks'
          },
          {
            label: '状态',
            key: 'status',
            slot: true
          }
        ],
      },
      resData: {
        current: 1,
        size: 10,
      },
      filterList: [{
          type: 'input',
          placeholder: '名称',
          prop: 'name',
        },
        {
          type: 'select',
          placeholder: '状态',
          prop: 'status',
          optList:this.$options.filters.status
        }
      ]
    }
  }
}

methods: {
  getData(datas = this.datas, params = this.params) {
    this.datas = datas
    this.params = params
    this.$set(this.datas.table, 'loading', true)
    api.list(params).then((res) => {
      this.$set(this.datas, 'resData', res.data)
      this.$set(this.datas.table, 'loading', false)
    }).catch((err) => {
      this.$set(this.datas.table, 'loading', false)
    })
  }
}

mod-form

template

<mod-form ref="modForm" :formParams="formParams"></mod-form>

script

data() {
  return {
    formParams: {
      name: 'updateForm',
      labelW: '80px',
      FormData: {},
      FormDataRule: {},
      FormDataParmas: [{
        type: 'input',
        label: '名称',
        prop: 'name',
        rule:[{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        }]
      }, {
        type: 'textarea',
        label: '备注',
        prop: 'remarks',
      }, ]
    }
  }
}