關(guān)鍵詞

Vue ElementUI el-table

GitHub

stockspec.vue
網(wǎng)站入口

el-table的一些用法

el-table的文檔里有很多的例子可以參考，這里記錄一些我碰到的問(wèn)題

• 固定表頭
  文檔里的方法是用

 <el-table height="250"></el-table>

但是這里有一個(gè)問(wèn)題，如果希望表格占滿頁(yè)面，并且隨著頁(yè)面縮放同步變化應(yīng)該怎么辦。解決方法：可以用window.onresize方法來(lái)動(dòng)態(tài)調(diào)整table的height

<el-table :height="tableHeight"></el-table>
<script>
export default {
  data() {
    return {
      tableHeight: window.innerHeight,
    };
  },
  mounted:function(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 100;
            
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - 100;
            }
        })　
    },
}

• 固定列
  在對(duì)應(yīng)的el-table-column 設(shè)置fixed屬性

<el-table>
<el-table-column prop="code" label="代碼" fixed></el-table-column>
<el-table-column prop="name" label="名字" fixed></el-table-column>
...
</el-table>

• 內(nèi)容過(guò)長(zhǎng)被隱藏時(shí)顯示tooltip
  設(shè)置show-overflow-tooltip

<el-table-column prop="code" label="代碼" fixed show-overflow-tooltip></el-table-column>

• row-click怎么獲取參數(shù)
  row-click 調(diào)用的方法可以有三個(gè)默認(rèn)的參數(shù) row，column和event，可以從row，column里拿到想要的數(shù)據(jù)

<el-table :data="stockSpecData" @row-click="displayDetails">
<script>

export default {
  methods: {
    displayDetails(row, column, event) {
      if(column.label == "名字") {
        return
      }
      this.selectcode = row.code
      this.selectname = row.name
     }
  }
}
</script>

• 用v-for動(dòng)態(tài)列渲染
  如果數(shù)據(jù)的props比較多，或者想動(dòng)態(tài)生成列，那可以用v-for和slot-scope來(lái)實(shí)現(xiàn)。
  stockSpecData就是所有的spec json數(shù)據(jù)，titleData是所有想顯示的列名，具體見(jiàn)源碼。
  scope.column.property代表當(dāng)前列的值，scope.row[scope.column.property]是當(dāng)前單元格的值。

<el-table :data="stockSpecData">
    <el-table-column
      v-for="(item,key) in titleData"
      :key="key"
      :prop="item.value"
      :label="item.name"
    >
      <template slot-scope="scope">
        <span>{{scope.row[scope.column.property]}}</span>
      </template>
    </el-table-column>
  </el-table>

以上一些都只是提供了解決方法，沒(méi)有對(duì)方法進(jìn)行詳細(xì)介紹，可以自行搜索用法。個(gè)人感覺(jué)console.log是最實(shí)用的方法之一。