循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

<el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose">
  <span>这是一段信息</span>
  <spanslot="footer"class="dialog-footer">
    <el-button@click="dialogVisible = false">取 消</el-button>
    <el-buttontype="primary"@click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

showView(id) {var param ={ id: id }

      GetProductDetail(param).then(data=>{

        Object.assign(this.viewForm, data);

      })this.isView = true},

<el-tablev-loading="listLoading":data="productlist"border

  fit

  stripe

  highlight-current-row

  :header-cell-style="{background:'#eef1f6',color:'#606266'}"@selection-change="selectionChange"@row-dblclick="rowDbclick"
>

rowDbclick(row, column) {var id =row.IDthis.showView(id);

    },

<el-formref="viewForm":model="viewForm"label-width="80px">

 <el-form-itemlabel="产品编号">
   <el-inputv-model="editForm.ProductNo" />
 </el-form-item>

  <el-form-itemprop="email"label="邮箱":rules="[

      { required: true, message: '请输入邮箱地址', trigger: 'blur' },

      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }

    ]"
  >
    <el-inputv-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

<el-row>
  <el-col:span="12">
    <el-form-itemlabel="产品编号">
      <el-inputv-model="editForm.ProductNo" />
    </el-form-item>
  </el-col>
  <el-col:span="12">
    <el-form-itemlabel="条码">
      <el-inputv-model="editForm.BarCode" />
    </el-form-item>
  </el-col>
</el-row>

<el-form-itemlabel="商品类型">
  <el-selectv-model="editForm.ProductType"filterable=""placeholder="请选择">
    <el-optionv-for="(item, key) in typeList":key="key":label="item.value":value="item.key"
    />
  </el-select>
</el-form-item>

created() {//获取产品类型，用于绑定字典等用途
    GetProductType().then(data =>{if(data) {

        data.forEach(item=>{this.productTypes.set(item.id, item.name)this.typeList.push({ key: item.id, value: item.name })

        })//获取列表信息
        this.getlist()

      }

    });

  },

  <el-tab-panelabel="说明"name="second">
    <el-form-itemlabel="说明">
      <el-inputv-model="editForm.Description"type="textarea":rows="10" />
    </el-form-item>
  </el-tab-pane>

  <el-tab-panelabel="详细说明">
    <el-form-itemlabel="详细说明">
      <divclass="border-radius"v-html="viewForm.Note" />
    </el-form-item>
  </el-tab-pane>

  <el-tab-panelabel="图片信息">
    <el-form-itemlabel="封面图片">
      <el-imagestyle="width: 100px; height: 100px":src="viewForm.Picture":preview-src-list="[viewForm.Picture]"
      />
    </el-form-item>
    <el-form-itemlabel="Banner图片">
      <el-imagestyle="width: 100px; height: 100px":src="viewForm.Banner":preview-src-list="[viewForm.Banner]"
      />
    </el-form-item>
    <el-form-itemlabel="商品展示图片">
      <el-imagev-for="item in viewForm.pics":key="item.key"class="border-radius":src="item.pic"style="width: 100px; height: 100px;padding:10px":preview-src-list="getPreviewPics()"
      />
    </el-form-item>
  </el-tab-pane>

getPreviewPics() {//转换ViewForm.pics里面的pic集合
      var list =[]if (this.viewForm.pics) {this.viewForm.pics.forEach(item =>{if(item.pic) {

            list.push(item.pic)

          }

        })

      }returnlist

    }

npm install @chenfengyuan/vue-barcode vue

npm install @chenfengyuan/vue-qrcode vue

//引入barcode,qrcode
import VueBarcode from '@chenfengyuan/vue-barcode';

import VueQrcode from'@chenfengyuan/vue-qrcode';

Vue.component(VueBarcode.name, VueBarcode);

  <el-tab-panelabel="详细说明"name="third">
    <el-form-itemlabel="详细说明">
      <tinymcev-model="editForm.Note":height="300" />
    </el-form-item>
  </el-tab-pane>

<template>
  <el-selectv-model="svalue"filterable clearable placeholder="请选择">
    <el-optionv-for="(item, index) in dictItems":key="index":label="item.Text":value="item.Value"
    />
  </el-select>
</template>

<script>
//引入API模块类方法
import { GetDictData } from'@/api/dictdata'exportdefault{

  name:'MyDictdata',//组件的名称
props: {

    typeName: {//字典类型方式，从后端字典接口获取数据
type: String,default:''},

    options: {//固定列表方式，直接绑定
type: Array,default: ()=>{return[] }

    }

  },

  data() {return{

      dictItems: [],//设置的字典列表
svalue:'' //选中的值
}

  },

  watch: {//判断下拉框的值是否有改变
svalue(val, oldVal) {if(val!==oldVal) {this.$emit('input',this.svalue);

      }

    }

  },

  mounted() {varthat= this;if(this.typeName&& this.typeName!== '') {//使用字典类型，从服务器请求数据
GetDictData(this.typeName).then(data=>{if(data) {

          data.forEach(item=>{if(item&& typeof(item.Value)!== 'undefined' &&item.Value!== '') {

              that.dictItems.push(item)

            }

          });

        }

      })

    }else if(this.options&& this.options.length> 0) {//使用固定字典列表
      this.options.forEach(item=>{if(item&& typeof(item.Value)!== 'undefined' &&item.Value!== '') {

          that.dictItems.push(item)

        }

      });

    }//设置默认值
    this.svalue= this.value;

  },

  methods: {



  }

}</script>

import myDictdata from '@/components/Common/my-dictdata'

export default{

  components: { myDictdata},

<el-selectv-model="searchForm.ProductType"filterable clearable placeholder="请选择">
  <el-optionv-for="(item, key) in typeList":key="key":label="item.value":value="item.key"
  />
</el-select>

<my-dictdatav-model="searchForm.ProductType"type-name="商品类型" />

<my-dictdatav-model="searchForm.Status":options="Status" />

Status: [

    { Text:'正常', Value: 0},

    { Text:'推荐', Value: 1},

    { Text:'停用', Value: 2}

  ]