3.0 Vue更改elementui公共的样式 + 调用子组件的方法 + Mock数据+饿了吗提示变量加文字

饿了吗table自定义样式

<el-table
  border 
  :cell-style="rowClass"
  :header-cell-style="headClass"
>
</el-table>

<script>
  methods: {
    rowClass(){
       return 'width:200%; text-align:center'
    },
    headClass(){
       return 'width:200%; text-align:center'
    },
</script>

 

<style lang="scss" scoped>
// 修改elementui 固定的样式时需要加/deep/ 报错请替换::v-deep
/deep/ .dialog {
  width: 30%!important;
}

修改el-table 合计行样式
 ::v-deep .el-table__footer-wrapper {
   .el-table__footer {
     td.el-table__cell{
       div{
          white-space: nowrap;
          // 其他自定义样式
        }
     }
   }
 }

</style>

饿了吗提示文字家变量


this.$message.warning("我爱你" + this.lover + ",再见"）

 methods: {
    // 保证子组件渲染出来后调用这个方法,可以连写
    handle(val) {
    // 保证子组件渲染出来之后调用这个方法
    this.$nextTick(() => {
      // listAdd是引入的组件，dataInit是子组件的方法
      this.$refs.listAdd.dataInit()
     })
      
    }
  }

/* Array类 */
 
var arr = Mock.mock({

  //随机取1个数
  "arr1|1":[1,2,3,4,5,6,7],

  //按序生成一个list
  "arr2|4":[{
    "name|+1":["gs","zk","lili"]
  }],

  //生成一个1-4个项的数组
  "arr3|1-4":["green"]
})


console.log(arr);

"arr1": 3, 
"arr2": [ { "name": "gs" }, { "name": "zk" }, { "name": "lili" }, { "name": "gs" } ], "arr3": [ "green", "green", "green", "green" ] }



const data = Mock.mock({
  'items|30': [{
    id: '@id',
    title: '@sentence(10, 20)',
    'status|1': ['published', 'draft', 'deleted'],
    author: 'name',
    display_time: '@datetime',
    pageviews: '@integer(300, 5000)'
  }]
})