關(guān)鍵詞

Vue ElementUI el-table

GitHub

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

el-table的一些用法

el-table的文檔里有很多的例子可以參考良蒸，這里記錄一些我碰到的問題

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

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

但是這里有一個問題，如果希望表格占滿頁面跃巡，并且隨著頁面縮放同步變化應(yīng)該怎么辦。解決方法：可以用window.onresize方法來動態(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;
            }
        })　
    },
}

• 固定列
  在對應(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)容過長被隱藏時顯示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)用的方法可以有三個默認的參數(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動態(tài)列渲染
  如果數(shù)據(jù)的props比較多，或者想動態(tài)生成列碎税，那可以用v-for和slot-scope來實現(xiàn)尤慰。
  stockSpecData就是所有的spec json數(shù)據(jù)，titleData是所有想顯示的列名雷蹂，具體見源碼伟端。
  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>

以上一些都只是提供了解決方法责蝠，沒有對方法進行詳細介紹，可以自行搜索用法萎庭。個人感覺console.log是最實用的方法之一霜医。