如下圖所示，這是一個(gè)ele UI庫(kù)中的table，一般情況下我們只能通過(guò)tableDATA來(lái)向里面填充數(shù)據(jù)來(lái)展示，而無(wú)法對(duì)其中添加點(diǎn)擊時(shí)間等操作。這里就來(lái)記錄學(xué)習(xí)一下。

這是我們的一般使用方法，只能將數(shù)據(jù)進(jìn)行展示。我們需要在el-table-column標(biāo)簽里面來(lái)進(jìn)行處理

        <el-table :data="tableData" style="width: 100%;height: 450px;"
                  :row-class-name="tableRowClassName">
          :row-class-name="tableRowClassName">
          <el-table-column
              prop="title"
              label=""
              width="500">
          </el-table-column>
          <el-table-column
              prop="author"
              label=""
              width="100">
          </el-table-column>
        </el-table>

我們?cè)跇?biāo)簽里面加上我們自定義的標(biāo)簽，可以通過(guò){{scope.row.title}}的方法來(lái)獲取數(shù)據(jù)，并來(lái)修改展示的效果。

如下面所示。

        <el-table :data="tableData" style="width: 100%;height: 450px;"
                  :row-class-name="tableRowClassName">
          :row-class-name="tableRowClassName">
          <el-table-column
              prop="title"
              label=""
              width="500">
            <template slot-scope="scope">
              <a @click="detail(scope.row.id)" style="color:black;cursor:pointer;font-size: 16px;">{{
                  scope.row.title
                }}</a>
            </template>
          </el-table-column>
          <el-table-column
              prop="author"
              label=""
              width="100">
          </el-table-column>
        </el-table>

element-ui table表格錯(cuò)位問(wèn)題

問(wèn)題描述

在使用element-ui中的 el-table 時(shí)，使用了 fixed 屬性固定列之后，就會(huì)容易在各種場(chǎng)景出現(xiàn)表格錯(cuò)位的問(wèn)題。

解決方案

解決辦法1 element-ui官網(wǎng)提供的doLayout方法：

doLayout：對(duì) Table 進(jìn)行重新布局。當(dāng) Table 或其祖先元素由隱藏切換為顯示時(shí)，可能需要調(diào)用此方法

直接在渲染表格時(shí)加入此方法

this.$nextTick(() => {
? ? ? // myTable是表格的ref屬性值
? ? ? if (this.$refs.myTable && this.$refs.myTable.doLayout) {
? ? ? ? this.$refs.myTable.doLayout();
? ? ? }
})

解決辦法2 element-ui官網(wǎng)提供的doLayout方法：

1.給所有的列增加width,即可解決

2.把加了fixed屬性的固定列的 min-width 改成 width

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: