526互联

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

发布时间 2023-11-29 16:47:43作者: 爱喝酸奶的吃货

背景：

小颖最近在写项目时遇到了要给  element-ui 中的  el-table 在 v-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: '性别' },
      ]
    }
  },

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