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

<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>
<!--          {{scope.row}}&#45;&#45;{{scope.column}}-->
        </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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章