elementui中table的 v-for中 slot-scope使用

红太狼 2023-02-14 01:16 8阅读 0赞

<template>
      <el-table
        :data="rightsDate"
        style="width: 100%"
        @cell-click="tableClick"
      >
        <el-table-column
          prop="address"
          label="序号"
          type="index"
        >
        </el-table-column>
        <el-table-column
          v-for="(info) in rightHeader"
          :key="info.key"
          :label="info.label"
          :prop="info.key"
          :show-overflow-tooltip="true"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row[scope.column.property]=='西药开立权限'">
               <el-link  type="primary">{
       { scope.row[scope.column.property]}}</el-link>
    
            </span>
            <span v-else-if="scope.row[scope.column.property]=='医生对麻醉处方权限'">
              <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" />
            </span>
            <span v-else-if="scope.row[scope.column.property]=='医生对西药处方权限'">
             <el-button type="success">医生对西药处方权限</el-button>
            </span>
            <span v-else-if="scope.column.property=='code'">
               <el-link type="primary">{
       { scope.row[scope.column.property]}}</el-link>
            </span>
            <span v-else>
             {
       { scope.row[scope.column.property]}}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    
    <script>
        export default {
            name: "index",
            data() {
                return {
                    rightHeader: [
                        {
                            label: '编码',
                            key: 'code'
                        },
                        {
                            label: '姓名',
                            key: 'name'
                        },
                        {
                            label: '权限描述',
                            key: 'description'
                        }
                    ],
                    rightsDate:
                        [{
                            "id": 221,
                            "code": "01",
                            "name": "西药开立权限",
                            "description": "医生对西药处方权限",
                            "ifUse": "0"
                        }, {
                            "id": 222,
                            "code": "02",
                            "name": "草药开立权限",
                            "description": "医生对草药处方权限",
                            "ifUse": "0"
                        }, {
                            "id": 223,
                            "code": "03",
                            "name": "成药开立权限",
                            "description": "医生对成药处方权限",
                            "ifUse": "0"
                        }, {
                            "id": 224,
                            "code": "04",
                            "name": "麻醉开立权限",
                            "description": "医生对麻醉处方权限",
                            "ifUse": "0"
                        },
                            {
                                "id": 225,
                                "code": "05",
                                "name": "精一开立权限",
                                "description": "医生对精一处方权限",
                                "ifUse": "0"
                            }
                        ]
                }
            },
            mounted() {
    
            },
            methods: {
                tableClick(row, column, cell) {
                    console.log("行点击事件")
                },
                handleEdit(index, row) {
                    console.log(index, row);
                },
                handleDelete(index, row) {
                    console.log(index, row);
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>