Tui基础组件文档库

# 某列 作用域插槽 渲染功能

需配置

columns: columns某一项添加 slotName（用解构接收{param/scope} ，而 param/scope 便是此行的数据）

<template>
  <div class="t-table" style="width:100%;">
    <t-table :table="table" :columns="table.columns">
      <template #enableStatus="{param}">
        <el-switch
          v-model="param.row.enableStatus"
          :active-value="1"
          :inactive-value="2"
          @change="handleStatusChange(param.row)"
        />
      </template>
      <template #enableStatus1="{scope}">
        <el-switch
          v-model="scope.row.enableStatus"
          :active-value="1"
          :inactive-value="2"
          @change="handleStatusChange(scope.row)"
        />
      </template>
    </t-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      table: {
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            enableStatus: 1,
            enableStatus1: 2,
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            enableStatus: 2,
            enableStatus1: 1,
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            enableStatus: 1,
            enableStatus1: 2,
            address: '广东省广州市天河区3'
          }
        ],
        columns: [
          { prop: 'name', label: '姓名', minWidth: '100' },
          {
            prop: 'status',
            label: 'render渲染',
            minWidth: '180',
            render: (text, row, index) => {
              // console.log(777, text, row, index)
              let type = ''
              let val = ''
              switch (text) {
                case '1':
                  type = ''
                  val = '待处理'
                  break
                case '2':
                  type = 'warning'
                  val = '进行中'
                  break
                case '3':
                  type = 'success'
                  val = '已完成'
                  break
              }
              return (
                <el-tag type={type}>
                  {val}
                </el-tag>
              )
            }
          },
          {
            prop: 'enableStatus',
            label: '插槽渲染(param)',
            minWidth: '180',
            slotName: 'enableStatus'
          },
          {
            prop: 'enableStatus1',
            label: '插槽渲染(scope)',
            minWidth: '180',
            slotName: 'enableStatus1'
          },
          { prop: 'address', label: '地址', minWidth: '220' },
          { prop: 'date', label: '日期', minWidth: '180' },
          { prop: 'address', label: '地址', minWidth: '220' }
        ],
      },
    }
  },
  methods: {
    // 状态修改
    handleStatusChange(row) {
      let text = row.status === 1 ? '启用' : '废止'
      this.$confirm(`确认要${text}这条数据吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success(`点击确定`)
      }).catch(() => {
        console.log('取消')
        row.status = row.status === 1 ? 2 : 1
      })
    },
    // 新增
    add(val) {
      console.log('新增', val)
    },
    // 编辑
    edit(val) {
      console.log('编辑', val)
    },
    // 删除
    handleDelete(val) {
      console.log('删除', val)
    }
  }
}
</script>
显示代码

← 字典过滤 →