如何给el-table中某一列加指定内容和点击事件

背景:

小颖最近在写项目时遇到了要给 element-ui中的 el-tablev-for el-table-column 标签时给某列加内容和点击事件,项目忙完了想着总结一下,下面一起来看下具体怎么实现吧

页面效果:

公共数据:

复制代码
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        sex: '男'
      }, {
        date: '2016-05-07',
        name: '李晓梅',
        address: '上海市普陀区金沙江路 158号',
        sex: '女'
      }],
    }
  },

公共点击事件:

复制代码
  methods: {
    toDetail(row, column, event) {
      console.log('点击地址啦');
    }
  }

公共CSS:

复制代码
<style lang="scss">
.blue-font-color {
  color: #409eff;
  border-bottom: 1px solid #409eff;
  cursor: default;
}
</style>

方法一:

使用 slot-scope + v-if + v-else

HTML:

复制代码
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column :prop="dt.prop" :label="dt.labelName" v-for="(dt,index) in colData"
        :key="index">
        <template slot-scope="scope">
          <span v-if="dt.prop=='address'" class="blue-font-color" @click="toDetail(scope.row)">
            {{ scope.row.address }}</span>
          <span v-else>{{ scope.row[dt.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>

Javascript:
colData: [
{ prop: 'date', labelName: '日期' },
{ prop: 'name', labelName: '姓名' },
{ prop: 'address', labelName: '地址' },
{ prop: 'sex', labelName: '性别' },
],

方法二:

使用 表格自带的 formatter + row-click事件

HTML:

复制代码
    <el-table :data="tableData" height="250" border style="width: 100%" @row-click="toDetail">
      <el-table-column :prop="dt.prop" :label="dt.labelName" v-for="(dt,index) in colData"
        :key="index" :formatter="dt.formatter">
      </el-table-column>
    </el-table>

Javascript:
data差异:

复制代码
      colData: [
        { prop: 'date', labelName: '日期' },
        { prop: 'name', labelName: '姓名' },
        {
          prop: 'address', labelName: '地址',
          formatter: (row, column, cellValue, index) => {
            return <span class='blue-font-color'>{cellValue}</span>
          }
        },
        { prop: 'sex', labelName: '性别' },
      ],

点击事件差异:

复制代码
    toDetail(row, column, event) {
      if (column.property == "address") {
        console.log('点击地址啦');
      }
    }
  }

方法三:

使用 表格自带的 formatter

HTML:

复制代码
    <el-table :data="tableData" height="250" border style="width: 100%">
      <el-table-column :prop="dt.prop" :label="dt.labelName" v-for="(dt,index) in colData"
        :key="index" :formatter="dt.formatter">
      </el-table-column>
    </el-table>

Javascript:

data差异:(tableData 还要的哦,只是这里没写)

复制代码
  data() {
    const that = this
    return {
      colData: [
        { prop: 'date', labelName: '日期' },
        { prop: 'name', labelName: '姓名' },
        {
          prop: 'address', labelName: '地址',
          formatter: (row, column, cellValue, index) => {
            return <span class='blue-font-color' onclick={that.toDetail.bind(null, row)}>{cellValue}</span>
          }
        },
        { prop: 'sex', labelName: '性别' },
      ]
    }
  },

点击事件就和上面 公共的点击事件方法 一样。

相关推荐
MrSkye7 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
爱学习的茄子15 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥1 小时前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
1234Wu1 小时前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的9 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络10 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘10 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way10 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家11 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能