Element-ui input 复合型输入框

1:  复核型输入框  可以前置或者后置元素,   一般为标签或者按钮。

可以通过slot 来指定input 中前置或者后置内容

<div>
  <el-input placeholder="请输入内容" v-model="input1">
    <template slot="prepend"> http:// </template>
  </el-input>
</div>
<div style="margin-top: 15px">
  <el-input placeholder="请输入内容" v-model="input2">
    <template slot="append"> http:// </template>
  </el-input>
</div>

<div style="margin-top: 15px;">
  <el-input placeholder="请输入内容..." v-model="input3">
    <el-select v-model="select" slot="prepend" placehodler="请选择...">
      <el-option label="餐厅名" value="1"></el-option>
      <el-option label="订单号" value="2"></el-option>
      <el-option label="用户电话" value="3"></el-option>
    </el-select> 
   <el-button></el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
</div>

----------------------------------------
watch 可以监听data 里边的数据:
data() {
  return {
    dialogVisibleApproval: false, //备注提交
  }
}
watch() {
  dialogVisibleApproval(e) {
    if(!e) {
      this.formApproval.remark = '';
    }
  }
}
-----------------------------------------
删除的话根据id 进行删除,  但传递参数的时候:  可以传递一个对象: 
删除操作
handleDelete({ row }) {
   console.log(row)
}
-------------------------------------
父子之间组件传递参数:  
子组件接受父组件的值:   使用props 来进行接受:  props 是一个对象: 
props: {
  height: {
    default: 100,
    type: Number,
  },
  width: {
    default: 100,
    type: Number,
  },
  x: {
    type: [String, Number],
    default: '',
  },
  y: {
    type: [String, Number],
    default: '',
  },
  type: {
    type: Array,
    default() {
      return [];
    },
  },
}

子组件的使用:  
第一:  引入子组件   使用import  from '引入子组件的路径'
第二:  使用components： {
         注册组件
       }
<pentagonSvg
  v-for="(item, index) of list"
  :key="index"
  :type="item.type"
  :x="item.x"
  :y="item.y"
  :width="item.width"
  :height="item.height"
></pentagonSvg>   //  然后使用组件

设置时间:
setInterval(()=> {
  var t = new Date();
  var h = t.getHours;
  var minutes = t.getMinutes();
  var s = t.getSecond();  //   获取时间格式
})

props:{
 tableHeight:{
   type:Number,
   default:0
 }
},

props: {
  remoteType: {
    type: String,
    default: '',
  },
  isRemote: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => {
        return [];
    },
  },
  props: {
    type: Object,
    default: () => {
      return {
        children: 'children',
        label: 'name',
      };
    },
 },
}

<el-table
  ref="fitlerTable"   // 整个table 的实例对象
  :data="tdata"      // data 为整个数据源
  :height="height"   //  代表整个table 的高度
  header-align="left"   // 头部的居左对其
  align="left"    // 每一个字段都居左对齐
  :size="size"    // 尺寸大小
  style="width: 100%"    // 宽度为 100%  设置宽度为 100%
  @selection-change="selectionChange"    //  多选情况下
 >

</el-table>

computed: {
  visibleDialog: {
    get() {
      return this.visible;
    }
    set(val) {
      this.$emit('update:visible', val);
    }
  },
  showOperation: {
    get() {
      return this.operation;
    }
    set(val) {
      this.$emit('update:operation', val);
    }
  }
}

provide() {
  return {

  };
},

inject: ['reloadPage'],

loading: 按钮加载状态:  点击数据之后进行的加载操作,  在按钮上显示加载操作
要设置为loading 状态,  只需要设置loading  属性为 true; 即可。
<el-button type="primary" :loading="true">加载中<el-button>

<el-button-group>
  <el-button type="primary" icon="el-icon-edit"></el-button>
  <el-button type="primary" icon="el-icon-share"></el-button>    
  <el-button type="primary" icon="el-icon-delete"></el-button>  // 删除
</el-button-group>

文字链接下划线。
<div>
  <el-link :underline="false">无下划线</el-link>
  <el-link>有下划线</el-link>
</div>
带有图标文字可以增强辨识度   (带有图标的文字可以增强辨识度)
<div>
  <el-link icon="el-icon-edit">编辑</el-link>
  <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
</div>

1: Element-ui 导出数据为 xlse  excel 表格:

   第一步安装插件:  npm install file-saver;
   第二步:npm install xlsx;

2: 第二步: 在main.js 中设置全局
   在vue 模板导出excel 表格模板
   import FileSaver from "file-saver";
   import XLSX from 'xlsx';

3: Vue.prptotype.$FileSaver = FileSaver;   // 设置全局
   Vue.prototype.$XLSX = XLSX;   // 挂载到Vue 的原型对象上。 (全局)

4:  事件处理函数:
   methods: {
     handle() {
       let table = document.getElementById("ou");
       let table_book = this.$XLSX.utils.table_to_book(tables);
       var table_write = this.$XLSX.write(table_book, {
          bookType: "xlsx";
          bookSST = true;
          type: "array",
       });
      try {
        this.$FileSaver.saveAs({
           new BLob([table_write], {type: "application/octet-stream"}),
           "sheetjs.xlsx"
        }) catch (e) {
           if(typeof console !== "undefined")  console.log(e, table_write);
        }
      }
        return table_write;
     }
   }