vue项目笔记一

watch: {
    // 监听无效列表中的每一项的text——show
    Invalidata_list(newValue, oldvalue) {
      if (newValue.findIndex((target) => target.text_show === false) === -1) {
        this.ReSubmitDisable = false
      } else {
        this.ReSubmitDisable = true
      }
  },

遍历数组,添加对象
 let new_arr = []
data.invalid_wechat_id_list.map((item) => {
      //         new_arr.push({ list_data: item, show: false, text_show: false })
      //       })

 <el-table-column label="操作" width="200">
                  <template scope="scope">
                    <span v-if="!scope.row.show" class="xiugaiqian">
                      <el-button type="text" size="small" @click="editWechat(scope.$index, scope.row)">
                        修改
                      </el-button>
                      <el-button type="text" size="small" @click="ClearWechat(scope.$index, Invalidata_list)"
                        >删除</el-button
                      >
                    </span>

ClearWechat(scope.$index, Invalidata_list) 当前行的index

ClearWechat: function (index, row) {
      row.splice(index, 1)
      this.Invalidata_list = this.Invalidata_list
    },

实现表格单元格编辑,通过改变show属性的值来控制输入框的显示隐藏

<template scope="scope">
                    <span v-if="!scope.row.show">{{ scope.row.list_data }}</span>
                    <span v-if="scope.row.show">
                      <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
                    </span>
 </template>

element ui 表格

                :show-header="false" //表头隐藏
                :row-style="{ height: 50 + 'px', background: '#fafafa', margin: '5px' }" //行样式
                :cell-style="{ padding: 0 + 'px' }" //列样式
                :header-cell-style="{ height: '10px', padding: '5px' }"

分页

<el-pagination
                :page-size="queryInfo.page_size"
                class="pagination f-r m-b-10"
                @size-change="handleSizeChange"
                :current-page="queryInfo.page_num"
                :total="queryInfo.total_num"
                layout="total, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
              >
              </el-pagination>
 export default {
	  data() {
	    return 
	    {
	        queryInfo: {
	        page_num: 1, //页数
	        page_size: 10, //每页条数
	        total_num: 0, //总条数
	      },
	      methods(){
	      //监听-pagesize
	         handleSizeChange(val){
	         this.queryInfo.page_size = val
	         //重新发起数据请求
	         this.getList()
	          },
	          //监听当前页
	          handleCurrentChange(val){
	          		this.queryInfo.page_num = val
	          		this.getList()
	          		}
	          //另一种分页情况,就是直接返回返回总数据
	      updatePage() {
		      if (this.tableAllData.length <= this.queryInfo.page_size) {
		        this.tableData = this.tableAllData
		      } else {
		        this.tableData = this.tableAllData.slice(
		          this.queryInfo.page_size * (this.queryInfo.page_num - 1),
		          this.queryInfo.page_size * (this.queryInfo.page_num - 1) + this.queryInfo.page_size
		        )
		      }
		      return this.tableData
		    },
			      }
		    }
  },

解决页面插值闪烁问题加入v-clock表示页面加载完成再显示

  /*属性选择器*/
	[v-cloak]{
		display:none;
	}

// Element-ui table表格去掉所有边框,如下：
// 备注：若去掉所有边框，可自行将头部边框注释掉即可
// 该样式写在style scoped外面

在el-table 中添加class="customer-table"类名

// 去掉表格单元格边框
.customer-table th{
    border:none;
  }
.customer-table td,.customer-table th.is-leaf {
  border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{
  border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{
  border: 1px solid #EBEEF5;
  border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2){
  border-right: 1px solid #EBEEF5;
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{
  width: 0;
}
.customer-table::before{
  width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}
// 表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {
    border: 1px solid #EBEEF5;  
    border-left: none;
}