【问题总结（7）7.14】将后台数据渲染到页面表格 取数组对象的值 调用接口方法往前端传参

1.报错 Object(…) is not a function

下面展示一些 错误代码。

// 

// An highlighted block
import getAll from '@/api/account'

下面展示一些 内联代码片。

//打开 接口文件   路径： '@/api/account'

// 由于没有 export default ，所以有很多个接口，引入时 要用{}封装 改为
export function getAll (parameter) {
  return request({
    url: '/api/v1/account',
    method: 'get',
    params: parameter
  })
}

下面展示一些 正确代码。

// A code block
var foo = 'bar';

// 引入时 要用{}封装 改为
import {getAll} from '@/api/account' 

2.报错 undefined

下面展示一些 错误代码。

//定位到第64行附近

// 
import { getAll } from '@/api/account'
import { Cascader } from 'antd'

const accountList = getAll()
this.accountList = accountList// 这里this是不指向vm实例的，因为放在了 export default外面

export default {
  name: 'AccountLike',
  components: {
    Cascader

  },
  data () {
   return {
   ....
   }

// `放到methods里 `。

// 
 async loadData () {
      const accountList = await getAll()
      this.accountList = accountList
      ....
      }

结果还是报错。

3.报错如下： xxxx is not a function

上图报错代码如下，说明accountList不能作为数组使用filter方法

// An highlighted block
computed: {
    filterAccountList () {
      const accountList = this.accountList
      return accountList.filter(
        o => o.name.indexOf(this.searchText) > -1
      )
    }

  },

放到methods里的代码 可以debug啦！！！！。

//console.log

 async loadData () {
      const accountList = await getAll() //在声明定义的后面打印声明定义的东西
      console.log(accountList)
      this.accountList = accountList
      ...
      }

点击result 出现小三角可展开符号

以上说明想要定义的accountList 是对象，实际的数组里被包裹在对象里

下面展示 解决方法。

// 比较稚嫩的方法

// An highlighted block
const accountObj = await getAll()
const accountList = accountObj.result
this.accountList = accountList  //此时是数组了

报错4.

// 原始代码
 <a-table :columns="columns" :data-source="filterAccountList" bordered >
 ....
 </a-table>


 //正确代码
  <a-table :columns="columns" :data-source="filterAccountList" bordered :rowKey="record=>record.id">
 ....
 </a-table>

5.报错 没有注册Cascader组件

下面展示一些 解决方法。
在路径 src/core/lazy_user.js文件下

// 添加
import { Cascder } from 'ant-design-vue'
Vue.use(Cascader)

6.报错 data 组件 合不上 但是不缺少括号
从return里开始找，再往上找是一个变量没有声明

总结

antdesign组件Table

1. slot-scope="text, record"     text为当前行的值，record为行数据
var foo = 'bar';

2.

// data () {
return{
columns
 {
          title: '用户名',
          dataIndex: 'name',
          key: 'name',
          width: '20%',
          scopedSlots: { customRender: 'name' }//渲染的是dataIndex的value 通过插槽slot-scope渲染出来
        },

1.数组： 数组使用方法有哪些 今天学到了 array.filter array.indexOf

indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

常用用途

常和filter 连用 
判断过滤出需要渲染的数据，展示到table里

// 过滤出有属性名name不为空的数组对象
 return accountList.filter(
        o => o.name.indexOf(this.searchText) > -1
      )

filter()

2. 数组与对象： 什么是数组对象，对象数组。主语在后面，代码在最外层
3. 数组与对象：如何取数组对象里的对象数组， （重要）

数组对象该怎么获取某个值

参考: 数组对象该怎么获取某个值.

forEach()

// 数组对象获取某个值
getUser(this.selectData.name).then(res => {
  const map = {}
  res.data.items.forEach(item => {
  map[item.id] = item.name
 })
 console.log(map)
 this.Userkey = map

5. 接口方法： 接口方法如何正确调用，api接口文件里 default 有和没有的区别
6. 函数：
   1） 箭头函数：省略了关键字function 与括号（）
   参考: 菜单联动.

箭头函数

// An highlighted block
p=> 其中，p代表的是一个类的实体（可以任意定义比如o）。如：
Entity.TB_table.Where(p => p.ID == condition).ToList()
这里p就是 TB_table 的一个实体，相当于 你new了一个TB_table。
=>这个就是linq的特性。你完全不用管这个。如果你要具体的意义，这个就要问微软了。
从你上面的代码，我觉得你应该是查找 某父级菜单 下的所有子菜单吧。其实就是一个联动。

参考: p => p.name.indexOf(searchperson)!== -1.

// An highlighted block
p => p.name.indexOf(searchperson)!== -1

这个=> 是箭头函数，会绑定作用域(this不是指函数作用域，而是上级作用域的this,这里没用到，可以不用管)，并返回后面js的结果。转化成普通函数就

相当于

function (p) {

retrun p.name.indexOf(searchperson)!== -1

}

vuejs

data

初始化，要渲染的数据，放在这

computed

计算属性
对数据进行操作 筛选，过滤

create

// An highlighted block
data () {
return {
 baseColumns: [
{...}
....
]
}
}
computed: {
    columns () {
      return this.baseColumns
    },
    }

this

vue里的this 只的是这个实例

6.vue 指令 v-bind
v-bind 与v-model区别
v-model常用于表单数据双向绑定。