element 单击单元格改变内容样式操作

最新推荐文章于 2024-04-25 15:28:41 发布

sunyiuhang

最新推荐文章于 2024-04-25 15:28:41 发布

阅读量497

点赞数 1

分类专栏： vue+element 文章标签： vue.js html html5

本文链接：https://blog.csdn.net/sunyiuhang/article/details/120309252

版权

vue+element 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<el-table
 border
    id="table1"
    class="elTable"
    ref="filterTable"
      :data="tableData"
      style="width: 100%"
      :cell-style="{borderColor:'#1F1F1F',height:'24px',background:'#141414',color:'rgba(255, 255, 255, 0.85)'}"
      :row-style="{height:'24px'}"
      :header-cell-style="{borderColor:'#1F1F1F',height:'40px',color: 'rgba(255, 255, 255, 0.85)'}"
      highlight-current-row
      @current-change="handleCurrentChange"
      :default-sort = "{prop: 'Order', order: 'ascending'}"
      @cell-click="cellClick"
      :row-class-name="tableRowClassName"
>
<el-table-column
      prop="Price"
      sortable
      :sort-method="sortMethod"
      :formatter="formatter"
      label="Close Price[Trade Date] 2021-01-27">
      <template slot-scope="scope">
      <button :class="{ 'span' :isDbClick}" @dblclick="cellDbClick"
       v-if="scope.row.index === tabClickIndex && tabClickLabel === 'Close Price[Trade Date] 2021-01-27'">{{scope.row.Price}}</button>
        <span :class="{ 'span' :isDbClick}" @dblclick="cellDbClick" v-else>{{scope.row.Price}}</span>
      </template>
    </el-table-column>

</el-table>

data：{
  tabClickIndex: null, // 点击的单元格
        tabClickLabel: '', // 当前点击的列名

}
methods:{
 //单击单元格
        cellClick(row, column, cell, event) {
        this.tabClickIndex = row.index
        this.tabClickLabel = column.label
        },
        tableRowClassName({ row, rowIndex }) {
          row.index = rowIndex
       },
}