el-table

:data="dataList"

绑定从后端请求到的数据 与 prop="" 配合将数据显示到列表上面

 <el-table
    border
   :data="dataList"
  >
//声明个对象
data() {
    return {
    dataList:[],
}
//调接口把请求到的数据 赋值给dataList 这个数据就是要放到列表上面的数组 
//与el-table-column 里面的prop配合
reissue(daa!=undefined?daa:'').then(res => {
    this.dataList =res.ipage.records
})

border 加表格

  <el-table
        border
       :data="dataList"
      >

没加border时 加border后

v-loading="listLoading" 加载中

调接口时调用

  <el-table
        border
       :data="dataList"
       v-loading="listLoading"
      >
      //data里面声明
    data() {
        return {
        listLoading: false,
        }
        
      //调接口之前然他我为true  调完接口让他为false
     this.listLoading = true
     reissue(daa!=undefined?daa:'').then(res => {
             this.dataList =res.ipage.records
             console.log('请求到的数据', this.dataList);
         }).finally(() => {
           this.listLoading = false
         })
          //无论接口调用成功或者失败都会执行的函数
         // .finally(() => {
        //   this.listLoading = false
       // })

this.listLoading = true时

this.listLoading = false时就不会加载

highlight-current-row 选中当前行

    <el-table
        border
       :data="dataList"
       v-loading="listLoading"
       highlight-current-row
      >
      //只一个highlight-current-row 就可以选中当前行

清除选中当前行

<el-button @click="clearCurrent()"

清除选中

       // 清除选中
     clearCurrent () {
       // 如果this.$refs 为空那么就是 <el-table
       //                               ref="table"
       // ref没有赋值或者table 与下面的值不同
       // table的值可以自定义
       console.log(this.$refs)
       this.$refs.table.setCurrentRow(null);
     },

@row-click="handleCurrentChange" 当表格的某一行被点击时获取被点击行的数据

    <el-table
        border
       :data="dataList"
       v-loading="listLoading"
       @row-click="handleCurrentChange"
      >
       //highlight-current-row 可加可不加
       //函数接收一个参数
        handleCurrentChange(row){
           console.log('获得选中当前行的数据',row);
       },
     

el-table-column

label 表格的标头

 <el-table-column
     label="我是标头"
    >

prop 要展现到列表的数据

 <el-table
    border
   :data="dataList"
  >
  //bz 就是数组dataList下面的数据 也就是要展示到列表的数据
   <el-table-column
     prop="bz"
     label="我是标头"
    >
   </el-table-column>
 </el-table>
//声明个对象
data() {
    return {
    dataList:[],
}
//调接口把请求到的数据 赋值给dataList 这个数据就是要放到列表上面的数组 
//与el-table-column 里面的prop配合
reissue(daa!=undefined?daa:'').then(res => {
    this.dataList =res.ipage.records
})

<el-table-column
             align="center"
             prop="bz"
             label="我是标头"
             show-overflow-tooltip
             width="80">
           </el-table-column>

dataList 的数据 👇

show-overflow-tooltip当内容溢出时显示tooltip

       <el-table-column
         prop="bz"
         label="我是标头"
         show-overflow-tooltip
         width="80">
       </el-table-column>

不加show-overflow-tooltip时

加上show-overflow-tooltip 当内容过多时

align="center" 数据方向

居中

       <el-table-column
        align="center"
         prop="bz"
         label="我是标头"
         show-overflow-tooltip
         width="80">
       </el-table-column>

靠左

       <el-table-column
        align="left"
         prop="bz"
         label="我是标头"
         show-overflow-tooltip
         width="80">
       </el-table-column>

靠右

       <el-table-column
        align="right"
         prop="bz"
         label="我是标头"
         show-overflow-tooltip
         width="80">
       </el-table-column>

固定到左边

fixed="left"

       <el-table-column
        align="right"
         prop="bz"
         label="我是标头"
         show-overflow-tooltip
         fixed="left">
       </el-table-column>

固定到右边

       <el-table-column
        align="right"
         prop="bz"
         label="我是标头"
         show-overflow-tooltip
         fixed="right">
       </el-table-column>

slot-scope="scope"

//当bz的值不为undefined时 显示删除
//删除上面有点击事件 scope.row为当前这一行的数据
<el-table-column
             align="center"
             prop="bz"
             label="我是标头"
             width="180"
             fixed="left">
             <template slot-scope="scope">
                <span v-if="scope.row.bz!=undefined" style="color: red;" @click="scope.row">删除</span>
             <!-- {{scope.row.bz}}-->
             </template>
           </el-table-column>